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>
1
Hari Gillala 24 nov. 2011 à 18:50

3 réponses

Meilleure réponse

Stockez d'abord vos options dans un tableau, puis vous pouvez repeupler vos options sélectionnées à chaque fois que vous en avez besoin.

1
David Aleu 24 nov. 2011 à 15:01

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>
0
Till 25 nov. 2011 à 10:50

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']").

0
Leon-dp 24 nov. 2011 à 15:45