Home arrow JavaScript arrow Page 2 - Dynamically Populating Select Menus Client-Side

Dynamically Populating Select Menus Client-Side

We're constantly searching for methods to both improve our application's performance and enhance the user's experience. This little JavaScript tool will enable you to achieve both of those goals. I will show you how to populate a menu of items on the fly, based on the selection of another, without reloading the page. This is handy for search tools, registration forms, inventory programs, and so many others. Just have a read, and you'll find a place for it in your own application!

Author Info:
By: Justin Cook
Rating: 4 stars4 stars4 stars4 stars4 stars / 30
June 02, 2004
  1. · Dynamically Populating Select Menus Client-Side
  2. · Code
  3. · Function
  4. · Conclusion

print this article

Dynamically Populating Select Menus Client-Side - Code
(Page 2 of 4 )

Before jumping into code, I'll explain to you by which mechanisms we can accomplish said task. Basically we're going to maintain a JavaScript array of all possible items that could be populated into the second menu. For each item in the array, there will also be indicated the item in the first menu with which it is associated. So then when the user selects a new item in the first list, we can take the new selected value, iterate through the array to find only those items associated with the value, and load them into the second menu. That means that until something is selected in the first menu, there will be nothing in the second.

While this could be a somewhat simple idea and tutorial, I'm afraid I have to throw in a little something to de-simplify it all. Suppose you wish to implement this little gadget in an 'edit' screen. As in, you as an administrator want to edit the information about a particular laptop, and have this piece of JavaScript installed on the page. Now the laptop already belongs to a certain category and sub-category, so we'll have to have some sort of handler to pre-populate the menus based on the information that's already there. Lost? I really hope not, because we're about to start coding.

Now we can do this all with one array and one function. In this example I'll show you how to create the array dynamically on the server, but first we need to see what it should look like statically. All will feed off a form that will look something like this:

<form name="form1">

<select name="types" onChange="fillItems(0)">

<option value="32">Laptops</option>

<option value="21">PDAs</option>


<select name="items"></select>


The array we will need will be multi-dimensional. In the first dimension, each item will contain an array with three indexes. The first will be the ID of the main category that it belongs to; in the example it will be either laptops (ID: 32) or PDAs (ID: 27). The second index will contain the actual unique ID of the item. The third will just be the description. In the end it should look like this:

arItems = [

[ 32, 234, 'Toshiba SuperLaptop'],

[ 32, 156, 'Compaq WonderMachine'],

[ 32, 333, 'Sony ThinBook'],

[ 27, 656, 'IBM c6'],

[ 27, 467, 'Palm HandThing']


So that's the end product, now I'll show you how to generate it. I'm assuming that you'll retrieve a result set from a database with ASP.

<script language="JavaScript">

var arItems = new Array()

arItems = [


strSQL = "SELECT type_id, id, description FROM items"

objRS.Open strSQL, strConn

arItems = objRS.GetRows()


Now we dump the contents of the server-side array into the identically-named client-side array.

for i = 0 to uBound( atItems, 2 )

response.Write( "[" & atItems( 0, i ) & "," & atItems( 1, i ) & _

",'" & atItems( 2, i ) & "']" )

if i < uBound( atItems, 2 ) then response.Write("," & vbCrLf )




With this mix of ASP and JavaScript, we should have the array we need. Feel free to use PHP, or whichever technology you prefer. Now let's get into the function.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials