Chain 2 Dropdown Lists With Javascript June 13, 2022 Post a Comment i want to have 2 dropdown menu's chained to each other so the 2nd dropdown only show options with the value that match 1st dropdown. here is my html Solution 1: You need to apply the class=value for the second <select> values . Check Working DEMO <select class="form-control" id="color"> <option value="">choose options</option> <option value="27">Blomme</option> <option value="26">Grøn</option> <option value="28">Syren</option> </select> <select class="form-control" id="size"> <option value="">choose options</option> <option value="27" class="27">XL</option> <option value="26" class="26">L</option> <option value="26" class="26">L</option> <option value="26" class="26">L</option> <option value="28" class="28">S</option> </select> Copy Solution 2: HTML> <select class="form-control" id="color"> <option value=""> choose options </option> <option value="27">Blomme</option> <option value="26">Grøn</option> <option value="28">Syren</option> </select> <select class="form-control" id="size"> <option value=""> choose options </option> <option value="27">XL </option> <option value="26">L</option> <option value="26">L</option> <option value="26">L</option> <option value="28">S</option> </select> Copy JQuery> $("#color").change(function(){ $("#size option").css({"display":"block"}); var val=$("#color").find(":selected").val(); $("#size option[value!="+val+"]").css({"display":"none"}); }); Copy Solution 3: Html: <select class="form-control" id="color"> <option value=""> choose options </option> <option value="27">Blomme</option> <option value="26">Grøn</option> <option value="28">Syren</option> </select> <select class="form-control" id="size"> <option value=""> choose options </option> <option value="27" class="27">XL </option> <option value="26" class="26">L</option> <option value="26" class="26">L</option> <option value="26" class="26">L</option> <option value="28" class="28">S</option> </select> Copy JQuery: $("#size").chained("#color"); Copy Demo: http://jsfiddle.net/g5BCL/ Solution 4: Can you try this: $('#color').change(function() { var opt1 = this.value; $('#size').children('option').each(function () { if(this.value != opt1 && this.value != "") { this.remove(); } }); }); Copy Solution 5: 1000% working HTML> <select class="form-control" id="color"> <option value=""> choose options </option> <option value="27">Blomme</option> <option value="26">Grøn</option> <option value="28">Syren</option> </select> <select class="form-control" id="size"> <option value=""> choose options </option> <option value="27">XL </option> <option value="26">L</option> <option value="26">L</option> <option value="26">L</option> <option value="28">S</option> </select> Copy JQuery> $alloption=$("#size").html(); $("#color").change(function(){ $("#size").html($alloption); var val=$("#color").find(":selected").val(); $("#size option[value!="+val+"]").remove(); }); Copy Share Post a Comment for "Chain 2 Dropdown Lists With Javascript"
Post a Comment for "Chain 2 Dropdown Lists With Javascript"