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

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

and this is table relationship that needs to be connected in our sample Dynamic Dependent Select Box
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>

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>";

  }
?>

db.php

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

Screenshot
Dynamic Dependent Select Box

Dynamic Dependent Select Box

Advertisements

12 thoughts on “Dynamic Dependent Select Box Using jQuery and Ajax

      • Hello Bunkawan, firstable conratulations for this wonderfull applicaion, If I would like to use an input text field instead of using a select box to display the city name, what can I do?, of course that if I use an input text only one city will be displayed but it´s ok.

        Thank you very much and congratulations angain.

  1. Thank you for a nice somewhat dynamic post about AJAX / PHP and MSQL select boxes.
    I will likely post a more dynamic version and I get it working and credit this post. Nice to keep it as OO as possible.

  2. Thanks for submit a coding but i looking for reverse effect when i select city “tokio” country becomes “japan” and if i city “jakarta” country becomes “Indonesia” should this possible……

  3. Pingback: Answer for Dynamic population of drop down list in html and php - Tech Magazine

  4. Pingback: DYNAMIC DEPENDENT SELECT BOX USING JQUERY AND AJAX

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s