Question

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

假设在第一个选择框中选择了Xiomi和相应的第二个值Xiomi Redme，那么在其他选择框中不应该选择相同的选项Xiomi Redme

<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函数，以便每当更改一个值时，另一个选择框中的相同选项被禁用。

Answer 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

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

1 个答案: