J'ai trois listes déroulantes
First dropdown options are
option1
option2
2nd and third dropdowns are
optionA
OptionB
Lorsque je sélectionne l'option 2 dans la première liste déroulante
Je devrais supprimer optionS des deux listes déroulantes.
Lorsque je sélectionne l'option1, mes deux listes déroulantes doivent se remplir à nouveau avec les valeurs d'origine.
J'utilise le code suivant pour supprimer d'une seule liste déroulante
Quelqu'un peut-il m'indiquer comment faire deux listes déroulantes en même temps s'il vous plaît.
<script type="text/javascript">
google.load("jquery", "1.4.2");
google.setOnLoadCallback(function()
{
var sites='#firstDDId';
$('#firstDDId').change(function()
{
if($(sites).val()=='Option1' )
{
alert(" Please note, optionA will be removed");
$("#secondDDId option[value='OptionA']").remove();
}
else
{
var exists = false;
$('#SecondDDId option').each(function()
{
if (this.value == 'OptionA')
{
exists = true;
return false;
}
}
);
if (exists==false)
{
$("#SecondDDId").append('<option value="OptionA">OptionA</option>');
}
}
});
});
</script>
3 réponses
Stockez d'abord vos options dans un tableau, puis vous pouvez repeupler vos options sélectionnées à chaque fois que vous en avez besoin.
Vous étiez sur la bonne voie là-bas. Vous manquiez juste la partie dynamique. J'ai également changé certaines variables et identifiants pour une meilleure lisibilité.
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<select id="control-ddl">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="child-ddl-1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id ="child-ddl-2">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id ="child-ddl-3">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id ="child-ddl-4">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<script>
$(document).ready(function() {
$("#control-ddl").change(function() {
// Array of child select id's; only these get the "A" option
// stripped and readded when control-ddl changes
var ddlIds = [ "#child-ddl-1", "#child-ddl-2", "#child-ddl-3" ];
$.each(ddlIds, function(idx, ddlId) {
if($("#control-ddl").val()=="2") {
$(ddlId + " option[value='A']").remove();
} else {
var exists = false;
$(ddlId + " > option").each(function() {
if (this.value == "A") {
exists = true;
return;
}
});
if (!exists) {
$(ddlId).append("<option value='A'>A</option>");
}
}
});
});
});
</script>
</body>
</html>
Modifiez $ ("# secondDDId option [value = 'OptionS']"). Remove (); dans $ ("option [value = 'Option']"). remove ();
Cela supprimera toutes les options avec la valeur OptionS.
If ($ ("# SecondDDId option [value = 'OptionS']"). length == 0) $ ("# SecondDDId"). append ('OptionS');
Cela ajoutera à nouveau l'option.
Pour cibler les deuxième et troisième listes déroulantes en même temps, vous pouvez utiliser $ ("select [id $ = 'DDId'] option [value = 'OptionA']").
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.