How to chain two drop down lists. Individually, these dropdowns work without issue. Bellow is my code of working example. The thing is, I need both drop-down lists to work as a dynamic filter. The integers ‘category_ID’ that I want to use to combine both lists are included in the “category” and “subcategory” tables. How to do it?
Select boxes:
<div class="col-lg-3 col-md-3">
<div class="form-group">
<label for="category-Selector">Category:</label>
<select id="category_Selector" class="form-select form-control" name="select_category" required>
<option value="">Select Category...</option>
<option disabled> ... </option>
<?php
//Load All Customers
$ret = "SELECT category_ID, category_Name FROM categories";
$stmt = $con->prepare($ret);
$stmt->execute();
$res = $stmt->get_result();
while ($cust = $res->fetch_object()) {
?>
<option><?php echo $cust->category_Name; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="col-lg-3 col-md-3">
<div class="form-group">
<label for="subcategory_Selector">Subategory:</label>
<select id="subcategory_Selector" class="form-select form-control" name="select_subcategory" required>
<option value="">Select Category first...</option>
<option disabled> ... </option>
<?php
//Load All Customers
$ret = "SELECT subcategory_Code, subcategory_Name FROM subcategories";
$stmt = $con->prepare($ret);
$stmt->execute();
$res = $stmt->get_result();
while ($cust = $res->fetch_object()) {
?>
<option><?php echo $cust->subcategory_Name; ?></option>
<?php } ?>
</select>
</div>
</div>
Data tables:
--
-- Table structure for table `categories`
--
DROP TABLE IF EXISTS `categories`;
CREATE TABLE IF NOT EXISTS `categories` (
`id` int NOT NULL AUTO_INCREMENT,
`category_ID` int NOT NULL,
`category_Name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
`category_Description` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=10 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
--
-- Dumping data for table `categories`
--
INSERT INTO `categories` (`id`, `category_ID`, `category_Name`, `category_Description`) VALUES
(1, 1, 'Opel', 'Passenger cars'),
(2, 2, 'Ford', 'Passenger cars & trucks'),
(3, 3, 'Volvo', 'Passenger cars & trucks');
--
-- Table structure for table `subcategories`
--
DROP TABLE IF EXISTS `subcategories`;
CREATE TABLE IF NOT EXISTS `subcategories` (
`id` int NOT NULL AUTO_INCREMENT,
`category_ID` int DEFAULT NULL,
`subcategory_Name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
`subcategory_Code` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=63 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
--
-- Dumping data for table `subcategories`
--
INSERT INTO `subcategories` (`id`, `category_ID`, `subcategory_Name`, `subcategory_Code`) VALUES
(1, 1, 'Meriva', '01'),
(2, 1, 'Monerey', '02'),
(3, 1, 'Zefira', '03'),
(4, 1, 'Insignia', '04'),
(5, 2, 'Focus', '01'),
(6, 2, 'Bronco', '02'),
(7, 2, 'F360', '03'),
(8, 2, 'Town Car', '04'),
(9, 3, 'S70', '01'),
(10, 3, 'XC90', '02'),
(11, 3, 'FH-12', '03');
Parent dropdown
<select ... onChange="getSubcategory(this.value);">
ajax
……………
function getSubcategory(val) {
$.ajax({
type: "POST",
url: "get_subcategory.php",
data:'category_ID='+val,
success: function(data){
$("#subcategory_Selector").html(data);
}
});
}
.php
<?php
require_once("config/db-connect.php");
//$db_handle = new DBController();
$query ="SELECT * FROM subcategories WHERE category_ID = '" . $_POST["category_ID"] . "'";
$results = $con->query($query);
?>
<option value="">Select Subcategory</option>
<?php
while($row=$results->fetch_assoc()) {
?>
<option value="<?php echo $row["subcategory_Code"]; ?>"><?php echo $row["subcategory_Name"]; ?></option>
<?php
}
?>