Dynamic Dependent Select Box Using jQuery and Ajax

Dynamic Dependent Select Box means whenever there is selected value in the “parent” box, the “child” box will fit its options value according to the value of “parent” box. It can be illustrated like this. Say, we have “country” select box and “city” select box. If we choose “Indonesia” in the “country” select box, the “city” select box will only show some cities located in Indonesia like “Jakarta”,”Semarang” and “Bandung”. It won’t show “Sydney”,”Amsterdam”,”Hamburg” and so on.

In This tutorial we are gonna make simple application to perform Dynamic Dependent Select Box.

Database Structure
This database consists of two tables, country and city

country table

+-------+-------------+------+-----+---------+---------------+
| Field | Type        | Null | Key | Default | Extra         |
+-------+-------------+------+-----+---------+---------------+
| id    | int(5)      | NO   | PRI | NULL    |auto_increment |
| name  | varchar(30) | NO   |     | NULL    |               |
+-------+-------------+------+-----+---------+---------------+

+-------+-------------+------+-----+---------+---------------+

+-------+-------------+------+-----+---------+---------------+

| id | int(5) | NO | PRI | NULL |auto_increment |

+-------+-------------+------+-----+---------+---------------+

city table

+------------+-------------+------+-----+---------+----------------+
| Field      | Type        | Null | Key | Default | Extra          |
+------------+-------------+------+-----+---------+----------------+
| id         | int(5)      | NO   | PRI | NULL    | auto_increment |
| name       | varchar(30) | NO   |     | NULL    |                |
| id_country | int(5)      | NO   | MUL | NULL    |                |
+------------+-------------+------+-----+---------+----------------+

+------------+-------------+------+-----+---------+----------------+

+------------+-------------+------+-----+---------+----------------+

| id | int(5) | NO | PRI | NULL | auto_increment |

| id_country | int(5) | NO | MUL | NULL | |

+------------+-------------+------+-----+---------+----------------+

and this is table relationship that needs to be connected in our sample Dynamic Dependent Select Box

selectbox.php
This PHP file is used as an html form and also execute client side programming, which is jQuery to perform dynamic dependent select box

<html>
  <head>
  	  <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
   	  <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
  
      <script type="text/javascript">
           $(document).ready(function(){

           	  
           	   $("#country").change(function(){
                     var country=$("#country").val();
           	   	     $.ajax({
           	   	     	type:"post",
           	   	     	url:"getcity.php",
           	   	     	data:"country="+country,
           	   	     	success:function(data){
                              $("#city").html(data);
           	   	     	}
           	   	     });
           	   });
           });
      </script>
  </head>
  <body>
        Country :
        <select name="country" id="country">
          <option>-select your country-</option>
  	    <?php 
  	    include "db.php"; 
        $result=mysql_query("SELECT id,name from country order by name");
        while($country=mysql_fetch_array($result)){
  	    
        echo "<option value=$country[id]>$country[name]</option>";

  	    } ?>
  	    </select>
  	    

  	    City :
  	    <select name="city" id="city">
  	    	<option>-select your city-</option>
  	    </select>
  </body>
</html>

<html>

<head>

$(document).ready(function(){

$("#country").change(function(){

var country=$("#country").val();

$.ajax({

type:"post",

url:"getcity.php",

data:"country="+country,

success:function(data){

$("#city").html(data);

}

});

</script>

</head>

<body>

Country :

<option>-select your country-</option>

<?php

include "db.php";

$result=mysql_query("SELECT id,name from country order by name");

while($country=mysql_fetch_array($result)){

echo "<option value=$country[id]>$country[name]</option>";

} ?>

</select>

City :

<option>-select your city-</option>

</select>

</body>

</html>

getcity.php

<?php
  include "db.php";

 $country=$_POST["country"];
  $result=mysql_query("select id,name FROM city where id_country='$country' ");
  while($city=mysql_fetch_array($result)){
  	echo"<option value=$city[id]>$city[name]</option>";

  }
?>

<?php

include "db.php";

$country=$_POST["country"];

$result=mysql_query("select id,name FROM city where id_country='$country' ");

while($city=mysql_fetch_array($result)){

echo"<option value=$city[id]>$city[name]</option>";

}

db.php

<?php
  mysql_connect("localhost","root","");
  mysql_select_db("php_dependentselectbox");
?>

<?php

mysql_connect("localhost","root","");

mysql_select_db("php_dependentselectbox");

Screenshot

Facebook Comments

Agung Setiawan

Software Engineer

Dynamic Dependent Select Box Using jQuery and Ajax

One thought on “Dynamic Dependent Select Box Using jQuery and Ajax”

Leave a Reply Cancel reply