Home arrow JavaScript arrow Page 3 - Dynamically Populating Select Menus Client-Side
JAVASCRIPT

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
TABLE OF CONTENTS:
  1. · Dynamically Populating Select Menus Client-Side
  2. · Code
  3. · Function
  4. · Conclusion

print this article
SEARCH DEVARTICLES

Dynamically Populating Select Menus Client-Side - Function
(Page 3 of 4 )

function fillItems( intStart ) {

var fTypes = document.form1.types

var fItems = document.form1.items

var a = atItems

var b, c, d, intItem, intType

Now that we've initialized all the variables, we do the all important 'intStart' check. This is in place for edit screens, where we already know the ID of the item. We can place in the body onload event, hand the ID as an argument to the function, and populate the field based on it. Here's the code.

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;

}

}

}

What I did here was go through the array, find that item, match it to the type, select the type, and set the 'intType'. The next piece will set an 'intType'; if not, 'intStart' is supplied. Just look to what the user has chosen in the 'types' select menu.

if ( intType == null ) {

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

}

Now the last piece. First, we empty what's currently in the 'items' menu, if anything exists. We iterate through the items array, find any items that match to 'intType', and throw them into the 'items' menu. As we go by each one, we check to see if its ID matches 'intStart'. If it does, it should therefore be selected, so we select it!

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;

}

}

}


</script>

So that's it. This is basically the most efficient way to accomplish the task. I've seen scripts where an extra function was created to handle the initial selecting of a pre-existing item ID for edit screens. But with this function, we are able to do it on the fly, in one function. Nifty ain't it?


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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