two dependent dropdown in php – Dependent Drop-down List in PHP using jQuery AJAX with Category SubCategory Example
Two Dependent Dropdown In PHP
1.itsolutionstuck_category
2.itsolutionstuck_subcategory
Step 1: Create Tables and Dummy Data
itsolutionstuck_category table:
CREATE TABLE `itsolutionstuck_category` ( `id` int(11) NOT NULL, `name` varchar(155) NOT NULL, `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, `updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00' ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
itsolutionstuck_subcategory table:
CREATE TABLE `itsolutionstuck_subcategory` ( `id` int(11) NOT NULL, `category_id` int(12) NOT NULL, `name` varchar(155) NOT NULL, `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, `updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00' ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Step 2: Create index.php file
index.php
<!DOCTYPE html>
<html>
<head>
<title>PHP - How to make dependent dropdown list using jquery Ajax? - itsolutionstuck.com</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://itsolutionstuck.itsolutionstuff.com/plugin/bootstrap-3.min.css">
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Select Category and get bellow Related Sub Category</div>
<div class="panel-body">
<div class="form-group">
<label for="title">Select Category:</label>
<select name="category" class="form-control">
<option value="">--- Select Category ---</option>
<?php
require('db_config.php');
$sql = "SELECT * FROM itsolutionstuck_category";
$result = $mysqli->query($sql);
while($row = $result->fetch_assoc()){
echo "<option value='".$row['id']."'>".$row['name']."</option>";
}
?>
</select>
</div>
<div class="form-group">
<label for="title">Select Sub Category:</label>
<select name="sub_cat" class="form-control" style="width:350px">
</select>
</div>
</div>
</div>
</div>
<script>
$( "select[name='category']" ).change(function () {
var categoryID = $(this).val();
if(categoryID) {
$.ajax({
url: "ajaxpro.php",
dataType: 'Json',
data: {'id':categoryID},
success: function(data) {
$('select[name="sub_cat"]').empty();
$.each(data, function(key, value) {
$('select[name="sub_cat"]').append('<option value="'+ key +'">'+ value +'</option>');
});
}
});
}else{
$('select[name="sub_cat"]').empty();
}
});
</script>
</body>
</html>
Step 3: Add DB Configuration File
db_config.php
<?php define (DB_USER, "itsolutionstuck"); define (DB_PASSWORD, "[email protected]"); define (DB_DATABASE, "itsolutionstuck"); define (DB_HOST, "localhost"); $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE); ?>
Step 4: Add Ajax File
ajaxpro.php
<?php
require('db_config.php');
$sql = "SELECT * FROM itsolutionstuck_subcategory
WHERE category_id LIKE '%".$_GET['id']."%'";
$result = $mysqli->query($sql);
$json = [];
while($row = $result->fetch_assoc()){
$json[$row['id']] = $row['name'];
}
echo json_encode($json);
?>