javascript - dropdown values hide show -


i have 2 dropdowns, here fiddle,

https://jsfiddle.net/oqsf7gjq/1/

<select id="ddloption"> <option value="">- select option -</option> <option value="1">yes</option> <option value="2">no</option> </select> <br/><br/> <select id="ddlcar"> <option value="">- please select name -</option> <option value="1">volvo</option> <option value="2">saab</option> <option value="3">mercedes</option> <option value="4">audi</option> </select>  

when user selects "yes" "ddloption" dropdown, want show 2 values (saab , audi) dropdown "ddlcar" , when user selects "no", want see values "ddlcar" dropdown.

please suggest me possibilities jquery code. thanks!

tested in edge, chrome, firefox , internet explorer 11

note hiding , showing options doesn't work in edge or ie. elements need removed.

$(function() {      var $ddlcar = $("#ddlcar");    var $ddlcaroptions = $ddlcar.children("option");      $("#ddloption").change(function() {      if ($(this).val() === "1") {        $ddlcaroptions.filter(".toggleable").attr("selected", false).remove();      } else {        $ddlcar.empty().append($ddlcaroptions);      }    });  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <select id="ddloption">    <option value="">- select option -</option>    <option value="1">yes</option>    <option value="2">no</option>  </select>  <br/>  <br/>  <select id="ddlcar">    <option value="">- please select name -</option>    <option class="toggleable" value="1">volvo</option>    <option value="2">saab</option>    <option class="toggleable" value="3">mercedes</option>    <option value="4">audi</option>  </select>


Comments

Popular posts from this blog

Ansible - ERROR! the field 'hosts' is required but was not set -

customize file_field button ruby on rails -

SoapUI on windows 10 - high DPI/4K scaling issue -