jQuery – Ajax Tutorials PHP

jQuery Dependent DropDown List – States and Districts

In this tutorial we are going to see how to change 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 download package.
View Demo In this example, we have two dropdown for listing states and districts. On changing states dorpdown values, the corresponding district dropdown values will be loaded dynamically using jQuery AJAX.
HTML Code for state and dsitrict 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 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 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 download package.
View Demo

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

Recommended Tutorials for you


Related posts

Adding Comments to PHP Code

Anuj Kumar

PHP – PECL

Anuj Kumar

Captcha Image Verification

Anuj Kumar

How to append a string in PHP

Anuj Kumar

PHP Prepared Statements

Anuj Kumar

Server Side form Validation in PHP

Anuj Kumar

Useful functions for arrays in PHP

Anuj Kumar

Hit counter in PHP

Anuj Kumar

6 comments

Swati January 21, 2019 at 11:20 am

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

Reply
Anuj Kumar January 21, 2019 at 2:34 pm

I will upload soon.

Reply
Sreedhar November 10, 2018 at 5:53 am

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

Reply
Anuj kumar November 10, 2018 at 6:15 am

I will upload soon

Reply
Sreedhar October 12, 2018 at 2:12 pm

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

Reply
Anuj kumar October 12, 2018 at 7:18 pm

I will upload soon

Reply

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.

This site uses Akismet to reduce spam. Learn how your comment data is processed.