如何链接两个动态填充的选择框？答案

【问题标题】：How to link two dynamically populated select boxes?如何链接两个动态填充的选择框？
【发布时间】：2014-08-22 22:52:52
【问题描述】：

我有两个动态填充的选择框，其中的数据来自页面内的相同 json 对象。我想要实现的是链接这两个框，这样每当一个选择框发生变化时，另一个选择框中的相同选项就会自动禁用。

所以假设小米和对应的第二个值小米红米在第一个选择框中被选中，那么相同的选项小米红米不应该在另一个选择框中可供选择

<div>
  <select id="brand-select" name="Brand">
     <option value=''>Select Brand</option>
     <option value='300'>Xiomi</option>
     <option value='147'>HTC</option>
  </select> 
</div>
<div>
  <select id='mobile_model_select' name='Mobile_Brand_Models' style='width:208px;'></select>
</div>  
<div>
  <select id="brand-select_product2" name="Brand">
     <option value=''>Select Brand</option>
     <option value='300'>Xiomi</option>
     <option value='147'>HTC</option>
  </select> 
</div>
<div>
  <select id='mobile_model_select_product2' name='Mobile_Brand_Models_For_Product2' style='width:208px;'></select>
</div>

这是我的 jquery 代码

   $(document).ready(function(){

   var modelData = {
     "300":{
                "MI3_16GB":"XIAOMI Mi3 (16GB)",
                "REDMI_NOTE":"XIAOMI REDMI NOTE",
                "REDMI":"XIAOMI Redmi ",
                "REDMI_1S":"XIAOMI REDMI 1S"

            },
            "147":{
                "ONE_M8":"HTC One (M8)",
                "DESIRE_610":"HTC Desire 610",
                "ONE_E8":"HTC ONE E8"
            }
     };

    $('#brand_select').change(function(){

              correspondingId = $(this).find(":selected").val();

              var correspondingIdObject = modelData[correspondingId];
              $('#mobile_model_select option').remove();

              $.each(correspondingIdObject, function(key, value){
                  $('#mobile_model_select').append($("<option>").text(value).attr('value',key));
              });

           $('#brand_select_product2').change(function(){   //
              correspondingSelectedIdObject = $(this).find(":selected").val();
            $('#mobile_model_select_product2 option').remove();

              $.each(correspondingSelectedIdObject, function(key, value){
                  $('#mobile_model_select_product2').append($("<option>").text(value).attr('value',key));         
          });
   });

我的问题是如何链接两个 onchange 函数，以便每当更改一个值时，另一个选择框中的相同选项被禁用。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

   for (var i=0; i<selects.length; i++) {

        $(selects[i]).find('option').removeAttr('disabled');

        for (var j=0; j<vals.length; j++) {

                $(selects[i]).find('option[value='+vals[j]+']').attr('disabled', 'disabled');
        }
    }

看看这个小提琴..希望这对你有帮助......

JSFiddle

学分：@Skwal

【讨论】：

是的，谢谢，这很接近，我想就我而言，我必须引入一个全局变量。