Question

我有三个下拉列表

First dropdown options are

option1
option2


2nd and third dropdowns are

optionA
OptionB

当我在第一个下拉列表中选择option2时

我应该从两个下拉列表中删除optionA。

当我选择option1时，我的两个下拉列表都应该重新填充原始值。

我使用以下代码仅从一个下拉列表中删除

有人可以指点我如何同时做两个下拉菜单。

<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>

Answer 1

首先将您的选项存储在数组中，然后您可以在每次需要时重新填充选择选项。

Answer 2

更改$（“＃secondDDId option [value ='OptionA']”）。remove（）; 到$（“option [value ='OptionA']”）。remove（）;

这将删除具有值OptionA的所有选项。

if（$（“＃SecondDDId option [value ='OptionA']”）。length == 0） $（ “＃SecondDDId”）附加（ 'OptionA'）;

这将重新添加选项。

要同时定位第二个和第三个下拉菜单，您可以使用$（“select [id $ ='DDId']选项[value ='OptionA']”）。

Answer 3

你在那里正确的轨道。你刚刚错过了动态部分。为了更好的可读性，我更改了一些变量和id。

<!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>

javascript-dropdown选项删除

3 个答案: