Home arrow JavaScript arrow Page 4 - 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 - Conclusion
(Page 4 of 4 )

If you find this function really handy, and want to reuse it over and over, don't fall into the trap of duplicating code. The best way to handle that is to pass in the select menus you're operating on via the argument list, and that way the same function can be used on lots of different menus throughout your application.

I have one big recommendation for this script. When coding it into your page, put the code after the </html> tag. Not necessarily the entire function, but at least the array generating code. The reason for this is that the array can become quite large, and you don't want the generation thereof to slow down the loading of the rest of your page.

I hope you enjoy this little tool. Speaking from experience once you implement it, you won't be able to live without it. If you have problems, feel free to hop on the forums! By the way, I've tested it with all major current browsers, and have not encountered a single problem.

Here's all the code together:

<script language="JavaScript">

var arItems = new Array()

arItems = [


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

objRS.Open strSQL, strConn

arItems = objRS.GetRows()


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 )




function fillItems( intStart ) {

var fTypes = document.form1.types

var fItems = document.form1.items

var a = atItems

var b, c, d, intItem, intType

if ( intStart > 0 ) {

for ( b = 0; b < a.length; b++ ) {

if ( a[b][1] == intStart ) {

intType = a[b][0];



for ( c = 0; c < fTypes.length; c++ ) {

if ( fTypes.options[ c ].value == intType ) {

fTypes.selectedIndex = c;




if ( intType == null ) {

intType = fTypes.options[ fTypes.selectedIndex ].value


fItems.options.length = 0;

for ( d = 0; d < a.length; d++ ) {

if ( a[d][0] == intType ) {

fItems.options[ fItems.options.length ] = new Option( a[d][2], a[d][1] ); // no line-break here


if ( a[d][1] == intStart ) {

fItems.selectedIndex = fItems.options.length - 1;





DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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