Dynamic Dependent Select Box with jQuery and Ajax

In this tutorial, we are going to take a look at a simple example of dynamic dependent select box using jQuery, Ajax and PHP.

Quick Tip : How to Get the Current Page URL in PHP?

Dynamic Dependent select boxes means whenever user select an option from ‘parent’ select box, the ‘child’ select box automatically adjust its options according to the value selected in ‘parent’ box. For example, We have two select boxes, ‘parent’ select box contains list of countries and ‘child’ select box which contains the list of cities. If we select ‘India’ from country Select box, the city select box will display only cities which are located in India like Mumbai, Bangalore, Pune, Chennai etc. If we switch Country to Canada it will hide Indian cities and output the list of Canadian cities like Toronto, Montreal, Ottawa, Halifax etc.

Database:

The database consist of two tables, ‘countries’ and ‘cities’,

CREATE TABLE  `countries` (
 `id` INT PRIMARY KEY AUTO_INCREMENT ,
 `name` VARCHAR( 50 ) NOT NULL
)

CREATE TABLE  `cities` (
 `id` INT PRIMARY KEY AUTO_INCREMENT ,
 `country_id` int( 11 ) NOT NULL ,
 `name` VARCHAR( 50 ) NOT NULL
)

The primary key (ID) of countries table serve as the foreign key(country_id) for the cities table.

Data stored within the database:

Countries Table:

Dynamic Dependent Select Box with jQuery and Ajax

Countries Table

Cities Table:

Dynamic Dependent Select Box with Jquery and Ajax

Cities Table

Index.php:

The PHP file which contains PHP, jQuery and HTML code used to display select boxes.

<?php require_once('config.php'); ?>
<html>
<head>
<title>Dynamic Dependent Dropdown with jQuery</title>
<style type="text/css">
	.wrapper{
		width: 500px;
		margin: 0px auto;
	}
	.inputbox{
		padding: 10px 0px;
	}
	.selectbox{
		padding: 5px;
		width: 250px;
	}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$('#country').change(function(){
		var country_id = $('#country').val();
		if(country_id != 0)
		{
			$.ajax({
				type:'post',
				url:'getvalue.php',
				data:{id:country_id},
				cache:false,
				success: function(returndata){
					$('#city').html(returndata);
				}
			});
		}
	})
})
</script>
</head>
<body>
<div class="wrapper">
	<h1>Dynamic Dependent Dropdown with jQuery</h1>
	<p><a href="http://coffeecupweb.com/">http://coffeecupweb.com/</a></p>
	<form>
	<div class="inputbox">
		<select id="country" class="selectbox">
	    	<option value="0">Please Select a country</option>
	    	<?php $sql = mysql_query('SELECT * FROM `countries`'); ?>
	        <?php while($row = mysql_fetch_array($sql)){ ?>
	    	<option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
	        <?php } ?>
	    </select>
	</div>
	<div class="inputbox">
	    <select id="city" class="selectbox">
	    	<option value="0">Please select a city</option>
	        <option></option>
	    </select>
	</div>
	</form>
</div>
</body>
</html>

getvalue.php:

PHP files which is responsible for the city selection depending upon country selected by user,

<?php
require_once('config.php');
$qry = 'SELECT * FROM `cities` WHERE country_id='.$_POST['id'];
print_r($qry);
$sql = mysql_query($qry);
while($row = mysql_fetch_array($sql)){
?>
	<option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
<?php } ?>

config.php:

PHP file used for database connectivity,

<?php
	$connectdb = mysql_connect('db_hostname','db_username','db_password') or die('Cannot connect to database');
	$selectdb = mysql_select_db('ddd') or die('Cannot Select database');
?>

Useful Read:

Count Characters Remaining with jQuery

6 Comments

  1. Harshal this is indeed very nice and working tutorial, but when i try to do this in WordPress, it is not working, can you help me? just give me hint how can it work in WordPress, i am using correct query which works in WP, i think i am not able to give the right URL which we need to give in Ajax url:’getvalue.php’, it works in custom php but i think wordpress will not understand this URL, can you help me here?

    Reply

Leave a Comment.