Append Data to Dropdown list Using Jquery Ajax PHP

by

 
How to Append Data to Dropdownlist Using Jquery Ajax PHP
How to Append Data to Dropdownlist Using Jquery Ajax PHP

In this tutorial, I am going to explain how to append data to dropdown 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. This is very simple and often required in any kind of web application.

Illustration of append data to dropdown list using jquery ajax PHP

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. If you have any doubt then please leave your comment below.   


7 thoughts on “Append Data to Dropdown list Using Jquery Ajax PHP”

  3. Hey there I am so delighted I found your weblog, I really found you by error, while I was researching on Google for
    something else, Anyhow I am here now and would just like to say many thanks for a remarkable
    post and a all round enjoyable blog (I also love the theme/design), I don’t have time to read it all at the minute but I have saved it and also added in your
    RSS feeds, so when I have time I will be back to read a great deal more, Please do keep up the awesome job.

    Reply

  4. Thanks for one’s marｖelous posting! I really enjoyed reading it, үou will be a great aսthoｒ.I will maje certain to bookmark your blog and
    may come bɑhk in the future. I want to encouraһe yoou to ultimatelyy ϲonjtinue your great
    woｒk, have a nie weekend!

    Reply

  7. I have to thank you for the efforts you’ve put in writing this blog.
    I’m hoping to view the same high-grade blog posts by you later on as well.
    In fact, your creative writing abilities has encouraged me to get my own, personal website
    now 😉

    Reply

Leave a Comment