如何鏈接兩個動態填充的選擇框？

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