Jquery Ajax Unlimited Dynamic Selectbox Based On Parent Categories
I have a table for category : | category_id | category_name | parent_id | 1 | Electronics | 0 | 2 | Mobile Phones | 1 | 3 | Computers | 1 | 4
Solution 1:
Please use below code 1)conf.php
<?php$conn = mysqli_connect('localhost','root','root','test') or die(mysqli_error($conn));?>
2)category-dropdown.php
<?phpinclude'conf.php';
$query = 'SELECT * FROM category WHERE parent_id=0';
$result = mysqli_query($conn,$query);
$data = $result->fetch_all(MYSQLI_ASSOC);
?><!DOCTYPE html><htmllang="en"><head><title>MultiDropdown</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></head><body><divclass="container"><divclass="row"><divclass="col-md-4"><selectname="category"class="form-control category"><optionvalue="">Select</option><?phpforeach($dataas$d){
echo'<option value="'.$d['id'].'">'.$d['category'].'</option>';
}
?></select></div></div><divid="dropdown_container"></div></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><script>
$(document).ready(function(){
$(document).on('change','.category',function(){
var id = $(this).val();
$.ajax({
url:'getcategory.php',
type:'post',
data:{'id':id},
success:function(data){
//alert(data);
$('#dropdown_container').append(data);
}
})
});
});
</script></body></html>3)getcategory.php
<?phpinclude'conf.php';
if(isset($_POST['id'])){
$id= $_POST['id'];
$query = 'SELECT * FROM category WHERE parent_id = '.$id;
$result = mysqli_query($conn,$query);
$data = $result->fetch_all(MYSQLI_ASSOC);
if(!empty($data)){
echo'<div class="row">
<div class="col-md-4">
<select name="category" class="form-control category">
<option value="">Select</option>';
foreach($dataas$d){
echo'<option value="'.$d['id'].'">'.$d['category'].'</option>';
}
echo'</select>
</div>
</div>';
}
}
?>Solution 2:
To find the unlimited sub-cats should be no problem: (I m not sure why you have this problem as you said you have no problem in coding)
For unlimited sub-cats you simply calling the same SQL to return sub-cats or null:
SELECT*FROM category WHERE parent_id = ?
The following is off-topic --------------
It might need a little bit energy if you want to show all products of a selected category and its all children.
You might need change your design to:
idcategory----------------11Electronics1101 MobilePhones1102 Computers110101Iphone110102SamsungGalaxy110201AsusLaptopFor above design max 99 child, if you need more, you might increase to 3-digits, etc
case study: find all products that are in category 11 and all its children:
SELECT*FROM products WHERE category_id like'11%'
Post a Comment for "Jquery Ajax Unlimited Dynamic Selectbox Based On Parent Categories"