Select Box Change Dependent Options dynamically (JavaScript Object)

You may have came across different examples showing how to change/load the content in child <SELECT> element, depending on the parent <SELECT> options. Most examples uses database and Ajax to achieve the same, which of-course can be implemented depending on your circumstance. But if you wish to use another method using pure JavaScript Objects, here's how you can do it. Select Box Change Dynamically

HTML

Start off by inserting two HTML <SELECT> elements in your page. Which should be identified with their ID names, parent and child.
  • 1
  • 2
  • 3
  • 4
<select id="parent_select"> <option>----</option> </select> <select id="child_select"></select>

Create JavaScript Objects

First create a list of objects and it's properties like shown in the example below. I have created a list of random stuff below, in similar way you can create a list of objects as per your project requirements.
JS
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
var mList = { Chocolates : ['Bournville', 'Snickers', 'Twix', 'Ferrero Rocher', 'Dark Chocolate', 'Milk chocolate', 'White chocolate', 'Gianduja chocolate'], Vegetables : ['Broccoli', 'Cabbage', 'Carrot', 'Cauliflower'], Icecreams : ['Black Raspberry', 'Frozen pudding', 'Neapolitan', 'Strawberry', 'Vanilla', 'Chokecherry', 'Frozen yogurt', 'Booza', 'Frozen yogurt', 'Ice milk'], Mobiles : ['Apple iPhone', 'Samsung Galaxy', 'Realme', 'Huawei', 'OnePlus', 'Asus ROG', 'Xiaomi', 'Vivo'] };

On Parent Change

Once we have the list of Objects, we can automatically populated the parent SELECT box with KEY names as options when the page is loaded, and then the user can populate child SELECT by choosing parent SELECT options.
JS
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
el_parent = document.getElementById("parent_select"); //parent select element el_child = document.getElementById("child_select"); //child select element for (key in mList) { //populate the parent select element with array key el_parent.innerHTML = el_parent.innerHTML + '<option>'+ key +'</option>'; } //add event listener to parent select, so that when user selects an option, child gets populated el_parent.addEventListener('change', function populate_child(e){ el_child.innerHTML = ''; itm = e.target.value; if(itm in mList){ for (i = 0; i < mList[itm].length; i++) { el_child.innerHTML = el_child.innerHTML + '<option>'+ mList[itm][i] +'</option>'; } } });
Below is 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!
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
<div class="wrapper"> <select id="parent_select"><option>----</option></select> <select id="child_select"></select> </div> <script language="javascript" type="text/javascript"> var mList = { Chocolates : ['Bournville', 'Snickers', 'Twix', 'Ferrero Rocher', 'Dark Chocolate', 'Milk chocolate', 'White chocolate', 'Gianduja chocolate'], Vegetables : ['Broccoli', 'Cabbage', 'Carrot', 'Cauliflower'], Icecreams : ['Black Raspberry', 'Frozen pudding', 'Neapolitan', 'Strawberry', 'Vanilla', 'Chokecherry', 'Frozen yogurt', 'Booza', 'Frozen yogurt', 'Ice milk'], Mobiles : ['Apple iPhone', 'Samsung Galaxy', 'Realme', 'Huawei', 'OnePlus', 'Asus ROG', 'Xiaomi', 'Vivo'] }; el_parent = document.getElementById("parent_select"); el_child = document.getElementById("child_select"); for (key in mList) { el_parent.innerHTML = el_parent.innerHTML + '<option>'+ key +'</option>'; } el_parent.addEventListener('change', function populate_child(e){ el_child.innerHTML = ''; itm = e.target.value; if(itm in mList){ for (i = 0; i < mList[itm].length; i++) { el_child.innerHTML = el_child.innerHTML + '<option>'+ mList[itm][i] +'</option>'; } } }); </script>

Demo

Category :
New question is currently disabled!