Probably the most popular post in the history of this blog is “Populate DropDowns with jQuery and Codeigniter”. In that post, I gave a quick overview of how to set up a dropdown or select box that depends on the value selected in another form element. That post was never really intended to be a complete “How To”, but it’s been such a popular post that I wanted to revisit the idea, and write up a more complete discussion of this technique.
What I’m going to do here is to create and populate an HTML select element using values that are dependent on a selection in another HTML input. In this case, I’m using two select elements, but you could adapt the technique for any kind of input. For example, let’s say you have a form that displays data for a zip code. Now, there are a LOT of zip codes in the US, and you probably don’t want to make your users scroll through such a long list to choose the value they’re interested in. So, you add another HTML select element that allows the user to choose the specific state that contains the zip code. So, initially, the zip code select element is blank, or set to some default value. Then once the user chooses a state, the zip code element is populated with all of the zip codes for that state. Nice, huh?
The widget below shows all “gigs” posted on craigslist relating to web development in the last 24 hours. The data initially comes from a Yahoo Pipe, which you can access here. That’s also the reason why it takes so long to load. The Pipe actually pulls the RSS feeds from each craigslist locale, which means it’s accessing something like 75 different feeds. I should probably figure out a way to discretize those feeds. In any case, the widget can be added to any website via this code: