Skip to Content
ajax drop down php
php code / April 22, 2018

ajax drop down php

In this instructional exercise you will figure out how to make dynamic drop down choice to stack information with jQuery, PHP and MySQL. The dynamic drop down generally used to show related information. In this instructional exercise we will execute drop down of worker to indicate representative subtle elements on representative name choice. The drop down determination information stack took care of on choice without page reload utilizing Ajax.

The instructional exercise covers in simple strides with live demo and finish demo content to download. So how about we begin the coding.

step by step code here

step 1 created db_connect.php


/* Database connection start */

$servername = “localhost”;
$username = “root”;
$password = “”;
$dbname = “phpcode”
$conn = mysqli_connect($servername, $username, $password, $dbname) or die(“Connection failed: ” . mysqli_connect_error());
if (mysqli_connect_errno()) {
    printf(“Connect failed: %sn”, mysqli_connect_error());

step 2 created employee.sql

`id` int(11) NOT NULL AUTO_INCREMENT COMMENT ‘primary key’,
`employee_name` varchar(255) NOT NULL COMMENT ’employee name’,
`employee_salary` double NOT NULL COMMENT ’employee salary’,
`employee_age` int(11) NOT NULL COMMENT ’employee age’,
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 COMMENT=’datatable demo table’ AUTO_INCREMENT=11 ;

— Dumping data for table `employee`

INSERT INTO `employee` (`id`, `employee_name`, `employee_salary`, `employee_age`) VALUES
(1, ‘Tiger Nixon’, 3208000, 61),
(2, ‘Garrett Winters’, 170750, 63),
(3, ‘Ashton Cox’, 86000, 66),
(4, ‘Cedric Kelly’, 433060, 22),
(5, ‘Airi Satou’, 162700, 33),
(6, ‘Brielle Williamsons’, 372000, 61),
(7, ‘Herrod Chandler’, 137500, 59),
(8, ‘Rhona Davidson’, 327900, 55),
(9, ‘Colleen Hurst’, 205500, 39),
(10, ‘Sonya Frost’, 103600, 23);

Step 3: created container.php

<body class=””>
<div role=”navigation” class=”navbar navbar-default navbar-static-top”>
<div class=”container”>
<div class=”navbar-header”>
<button data-target=”.navbar-collapse” data-toggle=”collapse” class=”navbar-toggle” type=”button”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<a href=”#” class=”navbar-brand”>PHPCODE</a>
<div class=”navbar-collapse collapse”>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>Home</a></li>


</div><!–/.nav-collapse –>

<div class=”container” style=”min-height:500px;”>
<div class=”>


Step 4 Created header.php

<!DOCTYPE html>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” href=””>
<link rel=”stylesheet” href=””>
<script src=””></script>
<script src=””></script>

Step 5 Created footer.php

<div class=”insert-post-ads1″ style=”margin-top:20px;”>


Step 6 Created index.php

<title>phpcode: Demo Ajax Registration Script with PHP, MySQL and jQuery</title>
<script type=”text/javascript” src=”script/getData.js”></script>
<?php include(‘container.php’);?>

<div class=”container”>
<h2>Example: Ajax Drop Down Selection Data Load with PHP & MySQL</h2>

<div class=”page-header”>
<select id=”employee”>
<option value=”” selected=”selected”>Select Employee Name</option>
$sql = “SELECT id, employee_name, employee_salary, employee_age FROM employee LIMIT 10”;
$resultset = mysqli_query($conn, $sql) or die(“database error:”. mysqli_error($conn));
while( $rows = mysqli_fetch_assoc($resultset) ) {
<option value=”<?php echo $rows[“id”]; ?>”><?php echo $rows[“employee_name”]; ?></option>
<?php } ?>
<div id=”display”>
<div class=”row” id=”heading” style=”display:none;”><h3><div class=”col-sm-4″><strong>Employee Name</strong></div><div class=”col-sm-4″><strong>Age</strong></div><div class=”col-sm-4″><strong>Salary</strong></div></h3></div><br>
<div class=”row” id=”records”><div class=”col-sm-4″ id=”emp_name”></div><div class=”col-sm-4″ id=”emp_age”></div><div class=”col-sm-4″ id=”emp_salary”></div></div>
<div class=”row” id=”no_records”><div class=”col-sm-4″>Plese select employee name to view details</div></div>
<div style=”margin:50px 0px 0px 0px;”>
<a class=”btn btn-default read-more” style=”background:#3399ff;color:white” href=”#” title=””>Back to Tutorial</a>
<?php include(‘footer.php’);?>

step 7 Created getEmployee.php


if($_REQUEST[’empid’]) {
$sql = “SELECT id, employee_name, employee_salary, employee_age FROM employee WHERE id='”.$_REQUEST[’empid’].”‘”;
$resultset = mysqli_query($conn, $sql) or die(“database error:”. mysqli_error($conn));

$data = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {
$data = $rows;
echo json_encode($data);
} else {
echo 0;

step 8 Created getData.js

// code to get all records from table via select box
$(“#employee”).change(function() {
var id = $(this).find(“:selected”).val();
var dataString = ’empid=’+ id;
url: ‘getEmployee.php’,
dataType: “json”,
data: dataString,
cache: false,
success: function(employeeData) {
   if(employeeData) {
} else {



PHPCODE © 2024