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
Post a Comment