Select Parent-Children Iteration using JQUERY

Question

Hey guys im using a simple option select in html code as follows:

<form>
        <select class="select" name="select3" id="select3">
          <option value="0">0</option>
          <option value="1">1</option>
        </select>
</form>

I want to be able to add another select form such as this:

  <form>
            <select class="select" name="select4" id="select4">
              <option value="2">4</option>
              <option value="3">5</option>
            </select>
</form>

But i only want it to appear if a certain value is selected in the first form, how can i do that in jquery?

make the css display of the second one display: none and check everytime the value changes to see if it's the one you want. If it is, change the display to either block or inline — Araymer, Jan 13 '16 at 00:50
Also, you should normally post your best attempt with your question. — Araymer, Jan 13 '16 at 00:51
this might be what you want to accomplish [example](http://stackoverflow.com/questions/34426206/dependent-dropdown-list-in-html-and-javascript/34426615#34426615) — Omar Yafer, Jan 13 '16 at 00:53
Possible duplicate of [jquery clone form fields and increment id](http://stackoverflow.com/questions/8018132/jquery-clone-form-fields-and-increment-id) — Lucas Rodrigues, Jan 13 '16 at 00:54

score 0 · Accepted Answer · edited May 23 '17 at 12:15

This might not be exactly what you want but consider the following:

In this HTML we have two selects

<select name="select1">
  <option value="val1">value 1</option>
  <option value="val2">value 2</option>
  <option value="val3">value 3</option>
</select>

<select name="select2" disabled="">
  <option value="val1" disabled="">value 1</option>
  <option value="val2" disabled="">value 2</option>
  <option value="val3" disabled="">value 3</option>
</select>

The following function will wait for changes in select 1. And depending on the value it will enable or disable options in select 2. Optionally you might try to mess with the css but this might prove to be a pain later on.

(function($){
    $(document).ready(function(){
    $('select[name="select1"]').on('change', function(){ //wait for changes in select 1
        var sel1 = $(this);
      var sel2 = $('select[name="select2"]');

            sel2.removeAttr("disabled");  //Enables Select 2
            sel2.children().attr('disabled','disabled'); //Disables all select  2 options

      if(sel1.val() === 'val1'){//Checks the select value
        sel2.find('option[value="val1"]').removeAttr('disabled'); //enables a specific option
        sel2.find('option[value="val2"]').removeAttr('disabled');
      }
      else if(sel1.val() === 'val2'){
        sel2.find('option[value="val2"]').removeAttr('disabled');
        sel2.find('option[value="val3"]').removeAttr('disabled');
      }
      else if(sel1.val() === 'val3'){
        sel2.children().removeAttr("disabled");
      }
    });  
  });

})(jQuery);

here is a jsfiddle example

and here is a similar question

Select Parent-Children Iteration using JQUERY

1 Answers1