CODEWITHSUNDEEP
javascriptjquery
John Doe
John Doe

Reputation: 2924

How to link two dynamically populated select boxes?

I have two dynamically populated selectboxes with data coming from same json object within the page. What I want to achieve is to link the two boxes so that whenever there is a change in one select box the same option in other select box gets automatically disabled.

So suppose Xiomi and the corresponding second value Xiomi Redme is selected in first selectboxes then the same option Xiomi Redme should not be available for selection in the other select box

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

Here is my jquery code

   $(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));         
          });
   });

My problem is how to link the two onchange functions so that whenever the value is changed in one the same option in the other select box is disabled.

Upvotes: 0

Views: 305

Answers (1)

Alok
Alok

Reputation: 522

   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');
        }
    }

have a look at this fiddle .. hope this helps u ...

JSFiddle

credits : @Skwal

Upvotes: 1

Related Questions