So the thing is that i have 4 drop downs and if i select the first drop down which is parent so it will populate products name based on 1st selection. And if the 2nd and 3rd drop down values are selected then it will filter the data on the 4th one
The problem i am facing is that i am not able to find a solution for this as i have to select all to get product and if I don't have sub sub category like in telecom then I am not able to get my products.
I've tried the ajax approach:
<script type="text/javascript">
$(document).ready(function(){
$('#parentt').on('change',function(){
var parentID = $(this).val();
if(parentID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'parent_id='+parentID,
success:function(html){
$('#sub').html(html);
$('#subsub').html('<option value="">Select sub first</option>');
}
});
}else{
$('#sub').html('<option value="">Select parent first</option>');
$('#subsub').html('<option value="">Select sub first</option>');
}
});
$('#sub').on('change',function(){
var subID = $(this).val();
if(subID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'sub_id='+subID,
success:function(html){
$('#subsub').html(html);
}
});
}else{
$('#subsub').html('<option value="">Select sub first</option>');
}
});
$('#subsub').on('change',function(){
var subsubID = $(this).val();
if(subsubID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'subsub_id='+subsubID,
success:function(html){
$('#pro').html(html);
}
});
}else{
$('#pro').html('<option value="">Select sub sub category first</option>');
}
});
});
</script>
<body >
<div class="select-boxes">
<?php
include('dbConfig.php');
$query = $db->query("SELECT * FROM categories where parent IS NULL");
$rowCount = $query->num_rows;
?>
<select name="parentt" id="parentt" >
<option value="">Select Main Category</option>
<?php
if($rowCount > 0){
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['category_id'].'">'.$row['category_name'].'</option>';
}
}else{
echo '<option value="">Category not available</option>';
}
?>
</select>
<select name="sub" id="sub">
<option value="">Select parent first</option>
</select>
<select name="subsub" id="subsub">
<option value="">Select sub category first</option>
</select>
<select name="pro" id="pro">
<option value="">Select sub sub category first</option>
</select>
</div>
</body>
----------------------------ajaxData.php-----------------------
if(isset($_POST["parent_id"]) && !empty($_POST["parent_id"])){
$query = $db->query("SELECT * FROM categories WHERE parent = ".$_POST['parent_id']."");
$rowCount = $query->num_rows;
if($rowCount > 0){
echo '<option value="">Select sub category</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['category_id'].'">'.$row['category_name'].'</option>';
}
}else{
echo '<option value="">Sub category not available</option>';
}
}
if(isset($_POST["sub_id"]) && !empty($_POST["sub_id"])){
$query = $db->query("SELECT * FROM categories WHERE parent = ".$_POST['sub_id']."");
$rowCount = $query->num_rows;
if($rowCount > 0){
echo '<option value="">Select sub sub category</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['category_id'].'">'.$row['category_name'].'</option>';
}
}else{
echo '<option value="">sub sub category not available</option>';
}
}
if(isset($_POST["subsub_id"]) && !empty($_POST["subsub_id"])){
$query = $db->query("SELECT * FROM products WHERE category_id = ".$_POST['subsub_id']."");
$rowCount = $query->num_rows;
if($rowCount > 0){
echo '<option value="">Select product</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['product_id'].'">'.$row['product_name'].'</option>';
}
}else{
echo '<option value="">product not available</option>';
}
}
i want products to be loaded on selection of parent even if sub or sub sub isn't selected ,upon the selection of sub or sub sub the data will be filtered accordingly