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.
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.
On Parent Change
On parent option change, we just switch to selected text and load the associated array into child select box.
And if you are wondering where’s select box, here’s sample HTML for parent and child select box.
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!
Saran Chamling. (He loves the web technology, and enjoys designing, exploring and writing about it @saaraan.com).