Dynamic Dependent Select Box | Lessoncup Programming Blog

Tuesday, 12 November 2013

Dynamic Dependent Select Box

Hi, i am going to tell you about how to develop a dynamic dependent select box using jquery, ajax and php, it is very useful and important task to web developers, and you don't need to spend hours to complete this task, it's just few minutes of work, just we need to know the logic behind this.



first create the database, and create country and city table, here the country_id is a primary key to country table and foreign key to city table. the above picture will give the idea of table relations

Database

--
--
-- Table structure for table `country`
--

CREATE TABLE IF NOT EXISTS `country` (
  `country_id` int(11) NOT NULL AUTO_INCREMENT,
  `country_name` varchar(100) NOT NULL,
  PRIMARY KEY (`country_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Table structure for table `city`
--

CREATE TABLE IF NOT EXISTS `city` (
  `city_id` int(11) NOT NULL AUTO_INCREMENT,
  `country_id` int(11) NOT NULL,
  `city_name` varchar(100) NOT NULL,
  PRIMARY KEY (`city_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;


index.php

make sure this file should connect to database file, take a Select Menu and write the query to fetch the records form country table and put it into a loop between the option tag in select menu. and take one more select menu to display the cities while changing the country select menu

<div id="form">
 <select name="" class="sbox" id="country">
   <option value="">Country</option>
   <?php
   $country=mysql_query("select * from country order by country_name");
   while($full=mysql_fetch_array($country)){
   ?>
   <option value="<?php echo $full['country_id']?>"><?php echo $full['country_name']?></option>
   
   <?php }?>
 </select>
 
 <div id="loader"></div>
 
 <select name="" class="sbox" id="city">
   <option value="">City</option>
   
 </select>
 
 </div>

Javascript

here write change function to #country div as a selector, and keep the select menu value in one variable, request the citys.php file using ajax and send the stored variable to file, and display the retrieved content into #city select menu 

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 $('#country').change(function(){
  
  var val = $('#country').val();
  
  var datasend='country='+val;
  
  
  $('#loader').fadeIn(400).html('<img src="loader.gif" align="absmiddle">');
  
  $.ajax({
   
   type:"POST",
   data:datasend,
   url:'citys.php',
   cache:false,
   success:function(msg){
    
    $('#city').html(msg);
    
    $('#loader').fadeOut("slow");
    
   }
   
  });
  
  
 });
 
  
});

</script>

CSS

<style>

body{ font-family:Verdana, Geneva, sans-serif; color:#333; font-size:11px; background-color:#66C; margin:0; padding:0;}

#lessoncup{width:800px; background-color:#FFF; height:100px; border:solid #CCC 1px; padding:5px; margin:0 auto; font-family:Arial, Helvetica, sans-serif; font-size:11px; margin-top:30px;}

#form{ margin:0 auto; margin-top:30px; margin-bottom:30px; width:350px;}

.sbox{padding:10px; border-radius:5px; background-color:#EAEAEA; float:left; border:solid #F0F0F0 1px; margin-right:30px; text-transform:capitalize;}

#loader{ width:30px; float:left; margin-top:10px;}

</style>

citys.php

connect the file to database and write the query using where condition and match the column name with ajax request variable name country, and display the matched rows values in option tag

<option value="">Select City</option>
<?php
extract($_REQUEST);

include("db.php");

$city=mysql_query("select * from city where country_id='$country' order by city_name");
$row=mysql_num_rows($city);

if($row<=0){
?>
<option>No city's found</option>
<?php 
}else{
while($full=mysql_fetch_array($city)){
?>
<option value="<?php echo $full['city_id']?>"><?php echo $full['city_name']?></option>
<?php }}?>

Live Demo   Download Script

3 comments :

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons