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

To start off with, I'd just like to advise you to not be fooled by the title. Just because you see the phrase 'client-side' in there doesn't mean that you ASP/PHP buffs can quickly navigate to another article. Well, truthfully you can, but you shouldn't! Once you understand the reasoning behind this article, you'll truly appreciate how even a bit of JavaScript can enhance the usability your application ten fold. This code could be employed on a static page, but I'm going to deal primarily with dynamic pages, because that's probably where you'll get the most use of it.

I feel I need to explain exactly what it is this little magic trick does. Picture a registration form, one where you have to input your country and state/province of residence. What if the form could give you a menu of selectable countries, and then generate another for you listing the logically available states/provinces to choose from. This would eliminate the need for users to type in their state/province, and also prevent them from having to scroll through one massive list of all possible states/provinces in all countries.

Now you're already thinking that this can be done server-side. We could simply reload the page when the first menu changes (user selects a country), and populate the second menu with items associated with the selected item of the first. While this is all well and good, this requires another hit to the server and trip to the database, thus slowing things down for everyone. If we can push this piece of processing off to the client's browser, why not do it?

Another example could be in the search form of an e-commerce website. A user selects from a list of categories that they're looking for a laptop, and immediately the next menu allows them to select from the possible manufacturers that you stock. Now are you starting to see the usefulness of this? If so, continue to read on, I'll show you how it's done.

Next: Code >>

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