jQuery Dependent DropDown List – States and Districts

In this tutorial, we are going to see how to change the district dropdown list option based on the selected state name.
For Localhost create a database with name demos and import the SQL file available inside the download package.
View Demo
In this example, we have two dropdowns for listing states and districts. On changing states drop-down values, the corresponding district dropdown values will be loaded dynamically using jQuery AJAX.
HTML Code for state and district dropdown

<form name="insert" action="" method="post">
<table width="100%" height="117"  border="0">
<tr>
<th width="27%" height="63" scope="row">Sate :</th>
<td width="73%"><select onChange="getdistrict(this.value);"  name="state" id="state" class="form-control" >
<option value="">Select</option>
<?php $query =mysqli_query($con,"SELECT * FROM state");
while($row=mysqli_fetch_array($query))
{ ?>
<option value="<?php echo $row['StCode'];?>"><?php echo $row['StateName'];?></option>
<?php
}
?>
</select></td>
</tr>
<tr>
<th scope="row">District :</th>
<td><select name="district" id="district-list" class="form-control">
<option value="">Select</option>
</select></td>
</tr>
</table>
</form>

Getting States using jQuery AJAX
This script contains a function that will be called on changing state dropdown values. It will send AJAX request to a PHP page to get corresponding district dropdown options.

<script>
function getdistrict(val) {
$.ajax({
type: "POST",
url: "get_district.php",
data:'state_id='+val,
success: function(data){
$("#district-list").html(data);
}
});
}
</script>

 Read State Database using PHP
This PHP code connects the database to retrieve district table values based on the country id passed by jQuery AJAX call.

<?php
require_once("config.php");
if(!empty($_POST["state_id"]))
{
$query =mysqli_query($con,"SELECT * FROM district WHERE StCode = '" . $_POST["state_id"] . "'");
?>
<option value="">Select District</option>
<?php
while($row=mysqli_fetch_array($query))
{
?>
<option value="<?php echo $row["DistrictName"]; ?>"><?php echo $row["DistrictName"]; ?></option>
<?php
}
}
?>

For Localhost create a database with name demos and import the SQL file available inside the download package.
View Demo

Download Source Code(JQuery Dependent DropDown List – States And Districts)
Size: 33.3 KB
Version: V 1.1

Leave A Reply

Your email address will not be published.

11 Comments
  1. Tanay Lohani says

    Thank you Anju sir, From your blog I find the solution to how to select district based on state. Thanks a lot sir, It’s really working

    1. Anuj Kumar says

      I am glad this helped you.

  2. sahar says

    hi
    Anuj kumar sir
    Can you plz help me how can i submit these to other table i want to store in other with other values as record

    1. Anuj Kumar says

      Use insert query to insert data

  3. iftikhar says

    Hi Anuj,

    Can you please share a tutorial on dynamic drop down having 4 menus , Like Continent, Country, Province, District ?
    Regards

    1. Anuj Kumar says

      I will post tutorial soon.

  4. Swati says

    Kidly send the Jquery Dropdown list -State, District and Talukas

    1. Anuj Kumar says

      I will upload soon.

  5. Anuj kumar says

    I will upload soon

  6. Sreedhar says

    jQuery Dependent DropDown List – countires,States and Districts
    Php ajax source code

    1. Anuj kumar says

      I will upload soon

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

Privacy & Cookies Policy