Posted Date:08-05-2017

In this post we will explain dynamic dependent drop down list using html,php,mysql,ajax

Dynamic Dependent dropdown list using php

Step 1: Create a new file dropdown-ajax.php

step 2: Create a mysql connection code inside dropdown-ajax.php

<?php
  $host = 'localhost';
  $user = 'root';
  $pass = '';
  mysql_connect($host, $user, $pass);
  mysql_select_db('demo');

  
 ?>

step3 : Create mysql table ls_countries and ls_states

CREATE TABLE `ls_states` (  `state_id` int(11) NOT NULL,  `name` varchar(30) NOT NULL,  `country_id` int(11) NOT NULL DEFAULT '1',  `status` int(11) NOT NULL COMMENT '1->active,0->deactive',  PRIMARY KEY (`state_id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1

CREATE TABLE `ls_countries` (  `country_id` int(11) NOT NULL AUTO_INCREMENT,  `sortname` varchar(3) NOT NULL,  `name` varchar(150) NOT NULL,  `phonecode` int(11) NOT NULL,  `status` int(11) NOT NULL COMMENT '1->active,0->deactive',  PRIMARY KEY (`country_id`)) ENGINE=InnoDB AUTO_INCREMENT=247 DEFAULT CHARSET=utf8

step4 : Create two drop down list one is dynamically with onclick function fetch_select and second dropdown list with id  using following code

<select onchange="fetch_select(this.value);">
  <option>Select country</option>
  <?php
  
  $select=mysql_query("select * from ls_countries");
  while($row=mysql_fetch_array($select))
  {
   echo "<option value=".$row['country_id'].">".$row['name']."</option>";
  }
 ?>
 </select>

 <select id="new_select">
 </select>

stpe4 : Create javascript function with ajax call to get second dropdownlist values using following code

function fetch_select(val)
{
 $.ajax({
 type: 'post',
 url: 'fetch_data.php',
 data: {
  get_option:val
 },
 success: function (response) {
  document.getElementById("new_select").innerHTML=response; 
 }
 });
}

step 5: Create a new file name as fetch_data.php for get  data and then send data to dropdown-ajax.php file on ajax request.

<?php
if(isset($_POST['get_option']))
{
 $host = 'localhost';
 $user = 'root';
 $pass = '';
 mysql_connect($host, $user, $pass);
 mysql_select_db('demo');

 $country_id = $_POST['get_option'];
 $find=mysql_query("select * from ls_states where country_id='$country_id'");
 while($row=mysql_fetch_array($find))
 {
  echo "<option>".$row['name']."</option>";
 }
 exit;
}
?>

we are  following above steps  final code like this

dropdown-ajax.php

<?php
  $host = 'localhost';
  $user = 'root';
  $pass = '';
  mysql_connect($host, $user, $pass);
  mysql_select_db('demo');
  $select=mysql_query("select * from ls_countries");
  while($row=mysql_fetch_array($select))
  {
   echo "<option value=".$row['country_id'].">".$row['name']."</option>";
  }
 ?>
 <html>
<head>
<source src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript">

  
function fetch_select(val)
{
 $.ajax({
 type: 'post',
 url: 'fetch_data.php',
 data: {
  get_option:val
 },
 success: function (response) {
  document.getElementById("new_select").innerHTML=response; 
 }
 });
}

</head>
<body>
<select onchange="fetch_select(this.value);">
  <option>Select country</option>
  <?php
  $host = 'localhost';
  $user = 'root';
  $pass = '';
  mysql_connect($host, $user, $pass);
  mysql_select_db('linus');
  $select=mysql_query("select * from ls_countries");
  while($row=mysql_fetch_array($select))
  {
   echo "<option value=".$row['country_id'].">".$row['name']."</option>";
  }
 ?>
 </select>
 <select id="new_select">
 </select>
</body>
</html>

 

fetch_data.php

<?php
if(isset($_POST['get_option']))
{
 $host = 'localhost';
 $user = 'root';
 $pass = '';
 mysql_connect($host, $user, $pass);
 mysql_select_db('linus');

 $country_id = $_POST['get_option'];
 $find=mysql_query("select * from ls_states where country_id='$country_id'");
 while($row=mysql_fetch_array($find))
 {
  echo "<option>".$row['name']."</option>";
 }
 exit;
}
?>

 

 

 

 

Post Views: 3,520

1 thought on “Dynamic Dependent drop down list using html,php,mysql,ajax”

Leave a Reply