Menu
I have two selects:
<select name="select1" id="select1"> <option value="1">Fruit</option> <option value="2">Animal</option> <option value="3">Bird</option> <option value="4">Car</option> </select> <select name="select2" id="select2"> <option value="1">Banana</option> <option value="1">Apple</option> <option value="1">Orange</option> <option value="2">Wolf</option> <option value="2">Fox</option> <option value="2">Bear</option> <option value="3">Eagle</option> <option value="3">Hawk</option> <option value="4">BWM<option> </select> How do I do that with jQuery if I choose Fruit in the first select? The second select would show me only Fruits - Banana, Apple, Orange. If I choose Bird in the first select, the second select would show me only Birds - Eagle, Hawk. And so on...
I tried to do it with this piece of jQuery code:
$("#select1").change(function() { var id = $(this).val(); $('#select2 option[value!='+id+']').remove(); }); Unfortunately, it removes almost everything, and I have no idea how to bring back some options. I also read something about clone, but I don't know how to use it in this case.
755
change(function() { var id = $(this). val(); $('#select2 option[value!= '+id+']'). remove(); });
With jQuery, you can use the . val() method to get an array of the selected values on a multi-select dropdown list.
Syntax of jQuery Select Option$(“selector option: selected”); The jQuery select option is used to display selected content in the option tag. text syntax is below: var variableValue = $(“selector option: selected”).
$("#select1").change(function() { if ($(this).data('options') === undefined) { /*Taking an array of all options-2 and kind of embedding it on the select1*/ $(this).data('options', $('#select2 option').clone()); } var id = $(this).val(); var options = $(this).data('options').filter('[value=' + id + ']'); $('#select2').html(options); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <select name="select1" id="select1"> <option value="1">Fruit</option> <option value="2">Animal</option> <option value="3">Bird</option> <option value="4">Car</option> </select> <select name="select2" id="select2"> <option value="1">Banana</option> <option value="1">Apple</option> <option value="1">Orange</option> <option value="2">Wolf</option> <option value="2">Fox</option> <option value="2">Bear</option> <option value="3">Eagle</option> <option value="3">Hawk</option> <option value="4">BWM<option> </select>Using jQuery data() to store data
I guess hiding elements doesn't work cross-browser(2012), I have'nt tested it myself.
128
I wanted to make a version of this that uses $.getJSON() from a separate JSON file.
Demo: here
JavaScript:
$(document).ready(function () { "use strict"; var selectData, $states; function updateSelects() { var cities = $.map(selectData[this.value], function (city) { return $("<option />").text(city); }); $("#city_names").empty().append(cities); } $.getJSON("updateSelect.json", function (data) { var state; selectData = data; $states = $("#us_states").on("change", updateSelects); for (state in selectData) { $("<option />").text(state).appendTo($states); } $states.change(); }); }); HTML:
<!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> </head> <body> <select id="us_states"></select> <select id="city_names"></select> <script type="text/javascript" src="updateSelect.js"></script> </body> </html> JSON:
{ "NE": [ "Smallville", "Bigville" ], "CA": [ "Sunnyvale", "Druryburg", "Vickslake" ], "MI": [ "Lakeside", "Fireside", "Chatsville" ] } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
