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


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


	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


<?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


	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


	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


	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();
				}
			});			
		});
	});

View Demo || Download Code

Hope this helps. Thanks.