Populating Multiple Drop-downs Dynamically

First off I want to say that there are multiple ways of doing something like this. Below is two ways (and I mention a third) to dynamically populate one drop down using the selection of another drop down (aka chaining drop-downs). One way we will see uses a pure JavaScript implementation and another is using a combination of JavaScript and a server-side language (here we are demonstrating PHP). After we get done talking about these two methods, I will briefly mention the third less savvy way.

For our demonstration purposes I am going to use two simple selects. One which we will call “Food Groups” and another which we labeled as “Food”. When the user selects a food group we want the foods drop down to clear its contents and then list the foods that are related to that specific food group.

Pure JavaScript Implementation

The pure JavaScript implementation is easy to do for simple and SMALL lists. What we want is to simply create a jagged array (an array of arrays of varying lengths) and then simply reference them using the option value from the food groups drop down. Notice the values for our food group drop down. Here we set them up using a simple index value for demonstration purposes. You could also use this trick (with modification) to create keys that you then use to access the individual arrays. I figure this limited use would be great to keep the code rather simple and straight forward.

To make the pure implementation work we will need to add an event handler to the food groups select box. When the option changes we will call our function to populate the second list box. So alter the code above with this line…

Here we are simply saying “Call selectFoods and pass it the selected option’s value.”. So if we select “Grains” the value 5 will be passed to our function. The JavaScript for this is listed below. We will take the selected index value, subtract 1 from it (since our array starts at 0), check to make sure it is in the range of valid indexes and then use it to access the particular array. Once we have done that it is just a matter of looping through the array elements of that group. We clear the existing options by setting the length of the options array to zero and then adding each as array item as a new option to the second select.

This implementation has a bit of problems when it comes to flexibility so it is suggested that this type of implementation be used for lists that relatively small and undergoes very little change. The advantage to something like this is that you don’t need to have a database connection or create any server-side script like we use in method 2. It is great for those do it yourself type of people that might be doing a business page or have limited server access and resources.

jQuery, JSON and PHP Way

The second method uses jQuery (a framework built using JavaScript… 1.5 or above for our example) and a server-side language (here PHP) to connect to a database, pass it the id of the group and have PHP return a response in JSON or (JavaScript Object Notation). Sounds like a lot of things to build this with but it is pretty straight forward if your site already has jQuery setup.

Using our HTML code example, minus any change event if you added one, we are going to bind a change event to it using jQuery. We will use an $.ajax() call to call our PHP script which will query the database for us using the food group ID we give it as a parameter. It will generate a result set in JSON which our JavaScript will get back as a reply. It will be a simple array that we then loop through and add the options to the foods select drop down. Here is how that might look…

When the AJAX is called it will be in the format http://www.example.com/getfoodgroups.php?id=5 if we selected the “Grains” food group. The PHP script will then use the ID to lookup the records it needs to in the database, formulate a JSON reply and return it to the JavaScript above where it will then loop through each result of the reply and append new option objects to the foods select.

This PHP script simply does a simple lookup on our foods table and returns two fields… foodid and name. These are the values that we are going to use back in our AJAX jQuery script to then populate the foods select drop down. That is all there is to it. When testing a setup like this I suggest you always test the PHP script first and use the URL to pass it some parameters and look at the results. Once you get the PHP script working fine THEN move on to the jQuery that way you know that if something is not working, it is the JavaScript that is broken and not your server-side code.

The old way

The third way is the old method similar to method 2 above, but just involves passing the current page the ID of the food group selected and refreshing the whole page, using the ID passed to then look up the foods on the server-side and creating the drop down with the appropriate returned records. This method is not encouraged because it would not be very user friendly and would require the page to be completely reloaded each time you selected a new food group. This is terribly slow and a waste of bandwidth for your visitors.

So with these three methods in mind, use the one you think would be best for your current setup. If you can implement any of them, I would recommend method 2 since it provides the most flexibility and is easily extensible. You can modify the results returned on the server-side code and it will immediately start populating drop downs in real time without any modifications to the JavaScript. These are only 3 of a plethora of options and configurations. You will need to modify these scripts I have provided here to better suit your database or web page design. But as you can see, the basics are there.

About The Author

Martyr2 is the founder of the Coders Lexicon and author of the new ebooks "The Programmers Idea Book" and "Diagnosing the Problem" . He has been a programmer for over 18 years. He works for a hot application development company in Vancouver Canada which service some of the biggest telecoms in the world. He has won numerous awards for his mentoring in software development and contributes regularly to several communities around the web. He is an expert in numerous languages including .NET, PHP, C/C++, Java and more.

Yeah if you would like to incur the overhead of having a framework for a simple function like this. I think we as programmers have to remember that frameworks are good if you are using 90%+ of the functionality otherwise they are code bloat we all don’t need. I can’t count how many times I have seen someone throw in a framework to use one simple fade function or something and they are incurring the wrath of 38kb being downloaded each time someone new comes to their site.

I have a hunch that setting up a binding for something like this would take as much code as I just displayed. Again, frameworks real saving grace is when you are using them extensively already. Then in that case, go with one of those solutions. My code above is only one of many ways to do this. Thanks again for the comment! 🙂

Deyemi

Sorry can I have two different dynamic dropdown menu in one form as in the first 2 will deal with category and sub category and the other two will deal with state and cities

About the Lexicon

The brain child of Martyr2, Dream.In.Code Mentor and veteran programmer, the Coders Lexicon is a website dedicated to the advancement of computer programming and technology. It offers advice, coding resources and references to cover web and desktop development.