Simple Cascading Dropdown List (AJAX)..

Posted by mkhairul - December 16, 2007 at 11:12:27 pm -

Categories: AJAX, Development

At first I was thinking of doing a tutorial, 30 minutes later, I decided to just post this thing as it is. This is a cascading dropdown ajax list example that I made for a friend. Basically, it is:

• Two lists (country and state)

• Selecting a country will prompt the state list to retrieve the state list for the selected country.

I’m using jQuery in this example (included in the download). Also some SQL dump files included for Country and State. There’s only states for Malaysia. I used an example form from Wufoo. I’m a big fan of the look n’ feel of their form. I started refer to it as a guideline for my work.

As you can see, it is very simple. I did this for a portal and its not just country and state, there’s districts and much more. I also added a blockUI plugin for jQuery for the user to easily add states in some other form.

Here is the example. Enjoy!

Oh, and don’t forget to change the username and password for the database connection.

2 Comments »

RSS feed for comments on this post. TrackBack URI

1. That is awesome. Thanks.

   Comment by Lee — January 16, 2008 #

2. Dear Expert,
   Thanking you for sharing this nice code. I want to include a District drop-down-list so that when I select a STATE from state list, its related districts will be populated in District List.

   Thanks.

   Comment by Haider — April 13, 2008 #

Leave a comment

Name (required)

Mail (will not be published) (required)

Website

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Search