jQuery <select> Manipulation, Multiple Selects with JSON, Set Defaults, Oh My

The following examples cover some of the basics when working with a <select> HTML element.

Fill multiple selects with JSON data onchange

This example fills a second (or more) <select> HTML element with data from a JSON request. Useful in those situations where the selection of the previous <select> element determines what needs to go in the next <select> such as car manufacturers, makes, year, models, etc.

View Example

Fill multiple selects with JSON data onchange and set the default for secondary <select> on post

This exmaple is similar to the above but by default the second <select> will lose it’s selected value after a POST. This example will remedy that problem.

View Example

Set the default selected value for a <select> HTML element onload

This example will show how to set the default selected value on page load.

View Example

Download

Download source code for all examples above

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter

Related Posts

Tags: ,

Comments (2)

  1. I can tell that this is not the first time you write about the topic. Why have you decided to write about it again?

  2. Thanks for this – very handy and clear code, which I’ve been able to adapt successfully. Much appreciated :)

    A very small thing: in the PHP, the useful json_encode function only exists from PHP 5.2 onwards, and some places (such as my workplace) are still running older versions. To detect this, use the PHP function function_exists(), and if json_encode isn’t present the developer will have to build the JSON string manually which is a PITA but worthwhile for reusability.

    Nice blog, thanks for sharing.

    Fred

Leave a Reply





Donate

If you found this article useful and would like to see more like it this please consider making a donation.