Select Box Change Dependent Options dynamically

We may have seen different examples showing how to change/load the content in child Select Box, depending on the parent Select Box options. Most examples uses database and Ajax to achieve the same, which I think is bit unnecessary. Here's how we can easily create dynamic dependent select box just using jQuery. Select Box Change Dynamically

Create Array

First thing to do is to create as many arrays you need for the child select box, values from the arrays will be loaded into child select box when user selects parent select box options.
JQUERY
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
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" }];

On Parent Change

On parent option change, we just switch to selected text and load the associated array into child select box.
JQUERY
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
$("#parent_selection").change(function() { var parent = $(this).val(); switch(parent){ case 'chocolates': list(chocolates); break; case 'vegetables': list(vegetables); break; case 'icecreams': list(icecreams); break; default: //default child option is blank $("#child_selection").html(''); break; } }); //function to 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>"); }); }

HTML

And if you are wondering where's select box, here's sample HTML for parent and child select box.
HTML
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
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>

Wrap Up

Here's the complete example code. Just copy and save code below as HTML file and navigate to the file using your browser. You will find demo at the bottom of this page. Good luck!
JQUERY
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
<!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 is changed $("#parent_selection").change(function() { var parent = $(this).val(); //get option value from parent switch(parent){ //using switch compare selected option and populate child case 'chocolates': list(chocolates); break; case 'vegetables': list(vegetables); break; case 'icecreams': list(icecreams); break; default: //default child option is blank $("#child_selection").html(''); break; } }); //function to 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>

Demo

Category :
  • I have been learning from your tutorials, i also recently publish a similar tutorial, i hope you will also like my way of writing code. :) https://www.allphptricks.com/dynamic-dependent-select-box-using-jquery-and-ajax/
  • Hi, if I put the all select part into a form, and hit submit, the page is reload and the selected data dispaeared. What should I add to leave the selected (parent and child, or parent and the choice for child) values still remain in the fields? Thank you in advance, Marta
  • OK. found the problem. In the list(array_list) function, replace [""] with [" ] in the third line. Note: I put brackets around the character pairs you need to swap, just to make it clear that the second pair of characters has a space. Don't put them in the code! This fixes the JavaScript error and makes the code behave as intended.
New question is currently disabled!