jquery - Javascript if an option is selected than a new sets of option appear -

in nutshell, when user selects option, set of options appear in relationship option selected.

below have done far:

the html:

<form method="" action="">         <input type="file" placeholder="upload project">         <select id="selectprovider">             <option disabled selected> select training platform </option>             <option value="1"> option 1</option>             <option value="2"> option 2 </option>             <option value="3"> option 3 </option>             <option value="4"> option 4 </option>             <option value="5"> option 5 </option>          </select>     </form> 

the javascript:

<script>  $(function(){      if ($('#selectprovider').val(1)) {       //that's stopped     }  });  </script> 

i.e. if option 1 selected following appear

<select>     <option> option 11 </option>     <option> option 12 </option>     <option> option 13 </option> </select> 

update:

    <select data-role="1" style="display: none;">     <option> option 11 </option>     <option> option 12 </option>     <option> option 13 </option> </select>       <select data-role="2" style="display: none;">     <option> option 21 </option>     <option> option 22 </option>     <option> option 23 </option> </select>       <select data-role="3" style="display: none;">     <option> option 31 </option>     <option> option 32 </option>     <option> option 33 </option> </select>    <select data-role="4" style="display: none;">     <option> option 41 </option>     <option> option 42 </option>     <option> option 43 </option> </select>   <select data-role="5" style="display: none;">     <option> option 51 </option>     <option> option 52 </option>     <option> option 53 </option> </select>   <script>  $(function(){      $('#selectprovider').on('change', function(){         if ($(this).val() == '1') {             var sel = $('select[data-role=1]');             sel.show();         }         else if ($(this).val() == '2') {             var sel = $('select[data-role=2]');             sel.show();         }          else if ($(this).val() == '3') {             var sel = $('select[data-role=3]');             sel.show();         }          else if ($(this).val() == '4') {             var sel = $('select[data-role=4]');             sel.show();         }              else if ($(this).val() == '5') {             var sel = $('select[data-role=5]');             sel.show();         }      });  });  </script> 

i modified html little , changed event handler, because invoked function didn't make sense.

html

<form method="" action="">         <input type="file" placeholder="upload project">         <select id="selectprovider">             <option disabled selected> select training platform </option>             <option value="1"> option 1</option>             <option value="2"> option 2 </option>             <option value="3"> option 3 </option>             <option value="4"> option 4 </option>             <option value="5"> option 5 </option>          </select>     </form>      <select data-role="1" style="display: none;">     <option> option 11 </option>     <option> option 12 </option>     <option> option 13 </option> </select>       <select data-role="2" style="display: none;">     <option> option 21 </option>     <option> option 22 </option>     <option> option 23 </option> </select>       <select data-role="3" style="display: none;">     <option> option 31 </option>     <option> option 32 </option>     <option> option 33 </option> </select>    <select data-role="4" style="display: none;">     <option> option 41 </option>     <option> option 42 </option>     <option> option 43 </option> </select> 

edit (for multiple selects)

for new updated code, see new fiddle. want store role in variable analyze in switch case statement.

$('#selectprovider').on('change', function(){     var role = $(this).val();     switchrole(role); });  function switchrole(role) {       var sel = $('select[data-role= ' + role + '  ]');       sel.show();       hideselects(role, sel) };  hideselects = function(role, selected) {     var elements = $("select").filter(function() {         return $(this).data("role") !== undefined;     });     var tohide = $(elements).not(selected);     tohide.hide(); }; 

i refactored hiding other selects it's own function.