Create Multiple Dependent Dropdowns November 28, 2023 Post a Comment How to i create a multiple dependent dropdown? for eg:- animalbirdSolution 1: I'd make use of the starts withattribute selector and write a simple event on the one select list. Then you can use the value of the selected item to show the appropriate child list.Here's a running demonstration:$('#one').change(function() { $('select[id^="two_"]').hide(); $('#two_' + this.value).show(); });Copyselect[id^="two_"] { display: none; }Copy<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><selectid="one"><optionvalue="a">animal</option><optionvalue="b">bird</option></select><selectid="two_a"><optionvalue="a1">lion</option><optionvalue="a2">tiger</option></select><selectid="two_b"><optionvalue="b1">sparrow</option><optionvalue="b2">eagle</option></select>CopySolution 2: You could set the two_a and two_b dropdowns to have display: none and use jQuery to detect for changes in dropdown one and use .hide() and .show() on the appropriate dropdowns to show/hide them. See http://codepen.io/anon/pen/LpPLpp for a demonstration. Share Post a Comment for "Create Multiple Dependent Dropdowns"
Post a Comment for "Create Multiple Dependent Dropdowns"