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.
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | Countries: <select name="country"> <option value="">Please Select</option> <option value="1">Nepal</option> <option value="2">India</option> <option value="3">China</option> <option value="4">USA</option> <option value="5">UK</option> </select> <div id="cityAjax" style="display:none"> <select name="city"> <option value="">Please Select</option> </select> </div> |
Using load() function to fetch cities with GET method
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | jQuery(document).ready(function(){ // when any option from country list is selected jQuery("select[name='country']").change(function(){ // path of ajax-loader gif image var ajaxLoader = "<img src='../ajax-loader.gif' alt='loading...' />"; // get the selected option value of country var optionValue = jQuery("select[name='country']").val(); /** * pass country value through GET method as query string * the 'status' parameter is only a dummy parameter (just to show how multiple parameters can be passed) * if we get response from data.php, then only the cityAjax div is displayed * otherwise the cityAjax div remains hidden */ jQuery("#cityAjax") .html(ajaxLoader) .load('data.php', "country="+optionValue+"&status=1", function(response){ if(response) { jQuery("#cityAjax").css('display', ''); } else { jQuery("#cityAjax").css('display', 'none'); } }); }); }); |
PHP code to populate cities selection list
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <?php $country = $_GET['country']; if(!$country) { return false; } $cities = array( 1 => array('Kathmandu','Bhaktapur','Patan','Pokhara','Lumbini'), 2 => array('Delhi','Mumbai','Kolkata','Bangalore','Hyderabad','Pune','Chennai','Jaipur','Goa'), 3 => array('Beijing','Chengdu','Lhasa','Macau','Shanghai'), 4 => array('Los Angeles','New York','Dallas','Boston','Seattle','Washington','Las Vegas'), 5 => array('Birmingham','Bradford','Cambridge','Derby','Lincoln','Liverpool','Manchester') ); $currentCities = $cities[$country]; ?> City: <select name="city"> <option value="">Please Select</option> <?php foreach($currentCities as $city) { ?> <option value="<?php echo $city; ?>"><?php echo $city; ?></option> <?php } ?> </select> |
Similarly, you can use POST method and load() function.
Using load() function to fetch cities with POST method
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | jQuery(document).ready(function(){ // when any option from country list is selected jQuery("select[name='country']").change(function(){ // path of ajax-loader gif image var ajaxLoader = "<img src='../ajax-loader.gif' alt='loading...' />"; // get the selected option value of country var optionValue = jQuery("select[name='country']").val(); /** * pass country value through POST method * the 'status' parameter is only a dummy parameter (just to show how multiple parameters can be passed) * if we get response from data.php, then only the cityAjax div is displayed * otherwise the cityAjax div remains hidden */ jQuery("#cityAjax") .html(ajaxLoader) .load('data.php', {country: optionValue, status: 1}, function(response){ if(response) { jQuery("#cityAjax").css('display', ''); } else { jQuery("#cityAjax").css('display', 'none'); } }); }); }); |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | jQuery(document).ready(function(){ // when any option from country list is selected jQuery("select[name='country']").change(function(){ // get the selected option value of country var optionValue = jQuery("select[name='country']").val(); /** * pass country value through GET method as query string * the 'status' parameter is only a dummy parameter (just to show how multiple parameters can be passed) * if we get response from data.php, then only the cityAjax div is displayed * otherwise the cityAjax div remains hidden * 'beforeSend' is used to display loader image * 'complete' is used to hide the loader image */ jQuery.ajax({ type: "GET", url: "data.php", data: "country="+optionValue+"&status=1", beforeSend: function(){ jQuery("#ajaxLoader").show(); }, complete: function(){ jQuery("#ajaxLoader").hide(); }, success: function(response){ jQuery("#cityAjax").html(response); jQuery("#cityAjax").show(); } }); }); }); |
Using ajax() function to fetch cities with POST method
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | jQuery(document).ready(function(){ // when any option from country list is selected jQuery("select[name='country']").change(function(){ // get the selected option value of country var optionValue = jQuery("select[name='country']").val(); /** * pass country value through POST method * the 'status' parameter is only a dummy parameter (just to show how multiple parameters can be passed) * if we get response from data.php, then only the cityAjax div is displayed * otherwise the cityAjax div remains hidden * 'beforeSend' is used to display loader image * 'complete' is used to hide the loader image */ jQuery.ajax({ type: "POST", url: "data.php", data: ({country: optionValue, status: 1}), beforeSend: function(){ jQuery("#ajaxLoader").show(); }, complete: function(){ jQuery("#ajaxLoader").hide(); }, success: function(response){ jQuery("#cityAjax").html(response); jQuery("#cityAjax").show(); } }); }); }); |
Hope this helps. Thanks.
Find me on
Mukesh Chapagain is a graduate of Kathmandu University (Dhulikhel, Nepal) from where he holds a Masters degree in Computer Engineering. Mukesh is a passionate web developer who has keen interest in open source technologies, programming & blogging. 
