How To Append Data To Dropdownlist Using Jquery Ajax PHP

3 min readJul 26, 2020

In this tutorial, I am going to explain how to append data to the drop down list using jquery ajax php. In order to do this, we use onchange function of jquery and send the data with get() or post() method to the ajax request and take the response data using ‘JSON’. For eg:- We have a table name ‘state’ and another table name ‘city’. Now, when we select a state from the state dropdown list, we can have the list of corresponding cities according to that particular state. So, let’s start.

Here I am using two tables respectively, state and city.

Also Read, How to search data from database using ajax in PHP

DDL information of the state table
— — — — — — — — — — — — — — —

CREATE TABLE `state` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`state_name` varchar(225) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

DDL information of the city table
— — — — — — — — — — — — — —

CREATE TABLE `city` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`state_id` int(10) DEFAULT NULL,
`city_name` varchar(225) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

Complete Code:-

<?php
//session_start();
include('connect.php');
if(isset($_POST['state_name']))
{
	$state_name = $_POST['state_name'];
	$stmt = $con->prepare("select * from city where state_id='$state_name'");
	$stmt->execute();
	$city_details = $stmt->fetchAll(PDO::FETCH_ASSOC);
	$option1 = '<select class="form-control" name="city">
				<option value="0">--Please Select--</option>';
	$option2 = '';
	foreach($city_details as $city){
		$option2 = $option2.'<option value="'.$city['id'].'">'.$city['city_name'].'</option>';
	}
	$option3 = '</select>';
	$option4 = $option1.$option2.$option3;
	$option5['cities'] = $option4;
	echo json_encode($option5);
	exit();
}
?>
<html>
<head>
<title>ajax example</title>
<link rel="stylesheet" href="bootstrap.css" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-theme.css" crossorigin="anonymous">
<style>
.container{
	width:50%;
	height:30%;
	padding:20px;
}
</style>
</head>
<body>
	<div class="container">
		<h3 align="center"><u>FETCH VALUE FROM DATABASE INTO DROPDOWN USING AJAX</u></h3>
		<br/><br/><br/>
<form class="form-horizontal" action="#">
	<div id="newuser"></div>
		  <div class="form-group">
		    <label class="control-label col-sm-2" for="state">State*:</label>
<?php
$stmt1 = $con->prepare("select * from state order by id ASC");
$stmt1->execute();
$state_details = $stmt1->fetchAll(PDO::FETCH_ASSOC);
?>
			    <div class="col-sm-10">
			      <select class="form-control" name="state" id="st" required="">
			      	<option value="0">--Please Select--</option> 
			      	<?php
			      	foreach($state_details as $state)
			      	{
						echo '<option value="'.$state['id'].'">'.$state['state_name'].'</option>';
					}
			      	?>
			      </select>
			    </div>
		</div>
		<br/>
		<div class="form-group">
		    <label class="control-label col-sm-2" for="city">City*:</label>
			    <div class="col-sm-10" id="city_div">
			     <select class="form-control" name="city">
			      	    <option value="0">--Please Select--</option>
			      	    
			      </select>
			    </div>
		</div>
		  
</form>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
//insert Data
$('#st').change(function(){
	var state = $('#st').val();
		//alert(state);
//send request to the ajax
	$.ajax({
			url: 'dropdownajax.php',
			type: 'post',
			data: {
				'state_name': state
			},
			dataType: 'json',
			
			})
			.done(function(data){
				$('#city_div').html(data.cities);
			})
			.fail(function(data,xhr,textStatus,errorThrown){
				alert(errorThrown);
	});
});
</script>
</body>
</html>

NOTE*
— — –
Download the bootstrap CSS and js files from google and include the path of the files in the href attribute of link tag and src attribute of the script tag respectively.

Also Read, CRUD operation in PHP using Ajax Jquery

CONCLUSION:- I hope this article will help you to display data based on the dropdown selection using ajax jquery in PHP.

How To Append Data To Dropdownlist Using Jquery Ajax PHP

Written by Bipsmedium