Sunday, 6 March 2016

Dynamically generate a select list with jQuery, AJAX & PHP



In this tutorial we are going to learn dynamic dependent select box using jquery, ajax and php. This functionality is very useful with suppose we have country list and we have another select box for loading state of selected country then at that time functionality is used. We can also use this functionality with category and sub category. Suppose we want to load sub category list from selected category then at that time this functionality is used. This things is done by Jquery, Ajax, Mysql and PHP. Ajax function fetch data from data base that releate to selected value without page refresh.


Source Code

Database


 --  
 -- Table structure for table `tbl_country`  
 --  
 CREATE TABLE IF NOT EXISTS `tbl_country` (  
  `country_id` int(11) NOT NULL AUTO_INCREMENT,  
  `country_name` varchar(250) NOT NULL,  
  PRIMARY KEY (`country_id`)  
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;  
 --  
 -- Dumping data for table `tbl_country`  
 --  
 INSERT INTO `tbl_country` (`country_id`, `country_name`) VALUES  
 (1, 'United States'),  
 (2, 'United Kingdom'),  
 (3, 'Canada');  
 -- --------------------------------------------------------  
 --  
 -- Table structure for table `tbl_state`  
 --  
 CREATE TABLE IF NOT EXISTS `tbl_state` (  
  `state_id` int(11) NOT NULL AUTO_INCREMENT,  
  `country_id` int(11) NOT NULL,  
  `state_name` varchar(250) NOT NULL,  
  PRIMARY KEY (`state_id`)  
 ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;  
 --  
 -- Dumping data for table `tbl_state`  
 --  
 INSERT INTO `tbl_state` (`state_id`, `country_id`, `state_name`) VALUES  
 (1, 1, 'Alabama'),  
 (2, 1, 'Alaska'),  
 (3, 1, 'Arizona'),  
 (4, 1, 'Arkansas'),  
 (5, 2, 'Greater London'),  
 (6, 2, 'Greater Manchester'),  
 (7, 3, 'Ontario'),  
 (8, 3, 'Quebec');  

dynamic.php


 <?php  
 function load_country()  
 {  
      $connect = mysqli_connect("localhost", "root", "", "dynamic");  
      $output = '';  
      $sql = "SELECT * FROM tbl_country ORDER BY country_name";  
      $result = mysqli_query($connect, $sql);  
      while($row = mysqli_fetch_array($result))  
      {  
           $output .= '<option value="'.$row["country_id"].'">'.$row["country_name"].'</option>';  
      }  
      return $output;  
 }  
 ?>  
 <html>  
      <head>  
           <title>Webslesson Tutorial</title>  
           <script src="jquery.js"></script>  
      </head>  
      <body>  
           <p>Select Country  
           <select name="country" id="country">  
                <option value="">Select Country</option>  
                <?php echo load_country(); ?>  
           </select></p>  
           <p>Select State  
           <select name="state" id="state">  
                <option value="">Select State</option>  
           </select></p>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $('#country').change(function(){  
           var country_id = $(this).val();  
           $.ajax({  
                url:"fetch_state.php",  
                method:"POST",  
                data:{countryId:country_id},  
                dataType:"text",  
                success:function(data)  
                {  
                     $('#state').html(data);  
                }  
           });  
      });  
 });  
 </script>  

fetch_state.php


 <?php  
 //fetch_state.php  
 $connect = mysqli_connect("localhost", "root", "", "dynamic");  
 $output = '';  
 $sql = "SELECT * FROM tbl_state where country_id = '".$_POST["countryId"]."' ORDER BY state_name";  
 $result = mysqli_query($connect, $sql);  
 $output = '<option value="">Select State</option>';  
 while($row = mysqli_fetch_array($result))  
 {  
      $output .= '<option value="'.$row["state_id"].'">'.$row["state_name"].'</option>';  
 }  
 echo $output;  
 ?>  

3 comments:

  1. Hi Thanks for the simple tutorial.

    Just have a quick one. How can i insert a country name and state name into the table? right now its showing the country and state IDs.

    Thanks in Advance.
    A

    ReplyDelete