javascript - How to only display certain options in select tag? -
how display options depending on value in select tag?
function key(id){ var selectvalue = document.getelementbyid('names').value = document.carmakes.cars.selectedindex var selectoption = $("#names option:selected").val(); } <select size='5' name='carmakes' onchange='key(id)'> <option selected='selected' value="-1">car makes</option> <option>bmw</option> <option>audi</option> </select> <select required='required' size='5' type='text' id='names'> <option selected="selected" value="0" >car names</option> <option value="1">x5</option> <option value="2">q5</option>
check this: http://www.sanwebe.com/2013/05/select-box-change-dependent-options-dynamically
<!doctype html> <html> <head> <meta charset='utf-8' /> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ //let's create arrays var chocolates = [ {display: "dark chocolate", value: "dark-chocolate" }, {display: "milk chocolate", value: "milk-chocolate" }, {display: "white chocolate", value: "white-chocolate" }, {display: "gianduja chocolate", value: "gianduja-chocolate" }]; var vegetables = [ {display: "broccoli", value: "broccoli" }, {display: "cabbage", value: "cabbage" }, {display: "carrot", value: "carrot" }, {display: "cauliflower", value: "cauliflower" }]; var icecreams = [ {display: "frozen yogurt", value: "frozen-yogurt" }, {display: "booza", value: "booza" }, {display: "frozen yogurt", value: "frozen-yogurt" }, {display: "ice milk", value: "ice-milk" }]; //if parent option changed $("#parent_selection").change(function() { var parent = $(this).val(); //get option value parent switch(parent){ //using switch compare selected option , populate child case 'chocolates': list(chocolates); break; case 'vegetables': list(vegetables); break; case 'icecreams': list(icecreams); break; default: //default child option blank $("#child_selection").html(''); break; } }); //function populate child select box function list(array_list) { $("#child_selection").html(""); //reset child options $(array_list).each(function (i) { //populate child options $("#child_selection").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>"); }); } }); </script> </head> <body> <div class="wrapper"> category : <select name="parent_selection" id="parent_selection"> <option value="">-- please select --</option> <option value="chocolates">chocolates</option> <option value="vegetables">vegetables</option> <option value="icecreams">ice cream</option> </select> <select name="child_selection" id="child_selection"> </select> </div> </body> </html>
or this: http://simpleweb.github.io/jquery-dependent-selects/
Comments
Post a Comment