Home » jQuery25 January 2011

Using jQuery & AJAX: Populate Selection List

In this tutorial, I will be showing how you can use AJAX with jQuery.

From jQuery, you can send values to php page as GET or POST parameters.

You can use load() function OR ajax() function of jQuery to accomplish the AJAX functionality.

View Demo || Download Code

In the example below, I will show you how you can send parameters as GET method with the load() jQuery function.

In this example, there is a selection list of countries. Upon selecting any country, AJAX is used and respective cities are fetched.

Using GET method and load() function

HTML code of selection list

Using load() function to fetch cities with GET method

PHP code to populate cities selection list

Similarly, you can use POST method and load() function.

Using load() function to fetch cities with POST method

For AJAX use, jQuery also has another function called ajax().

Below is the code on how we can use it:-

Using ajax() function to fetch cities with GET method

Using ajax() function to fetch cities with POST method

View Demo || Download Code

Hope this helps. Thanks.

jQuery

Get New Post by Email

Find me on

FacebookTwitterGoogle+LinkedInRSS Feed
  • Kriwit_17

    How does it get value of variables for both?

    I’m beginner. Please help me.

  • Khoda Ravi

     can you please tell me how to add this code in magento ……………????????

  • Tenaciousmug

    I’m curious on how your PHP looks that outputs it though. That’s the problem I am having with AJAX.
    I’m trying to select something from my database depending on what gender the clicked on (radio button).
    If you don’t mind showing your PHP page, I would love to see it. (:

  • Tenaciousmug

    I’m curious on how your PHP looks that outputs it though. That’s the problem I am having with AJAX.
    I’m trying to select something from my database depending on what gender the clicked on (radio button).
    If you don’t mind showing your PHP page, I would love to see it. (:

  • Raymond

    Hi! Great tips! One question, how can I do this with multiple select boxes in chain? Meaning, when I choose the first one, it will populate the second one, when I select the second one, it will populate a third one?! Thanks!

  • nidhin

    Nice thanks alot…