webdev && sysadmin quips, tips, articles + more

More jQuery Fun - Auto Populating a Select Box

| Comments

Note: This post was updated 8/2/2011 to include jsfiddle code snippets and better/smarter code overall. Enjoy!

Problem: You want to dynamically populate a select box and you don’t know how.

Solution: Easy, I will show you.

First off, I lied there is no built in way in jQuery (why?, I don’t know) to automatically populate a select box. But it actually is very easy. There are plenty of methods to accomplish this but I like to do it this was because utilizes the Option object and it doesn’t require html string concatenation.

The basics

Example 1:

In this example I will populate the 2nd select box based on the value of the first one.

Example 2:

This time when I change something in the first sel, it does the changing of the second select box.

What now?

There are many paths you can go down to make your select boxes dynamic, whether that is auto populating them, adding or removing single values, making them submit forms, submitting ajax calls to populate etc. etc. The key to making your life easier is to understand the way the select element is handled. Think of it as an array of element objects (which it is), at each index is an option and each option has text and a value.

Need help implementing a specific example? Just ask in a comment!