jQuery ajax基于父类别的无限动态选择框 [英] jQuery ajax unlimited dynamic selectbox based on parent categories
问题描述
我有一个类别表：
| category_id | category_name | parent_id
| 1 | Electronics | 0
| 2 | Mobile Phones | 1
| 3 | Computers | 1
| 4 | Iphone | 2
| 5 | Samsung Galaxy| 2
| 6 | Asus Laptop | 3
因此，此表能够存储父类别的无限子类别。
So this table is able to store unlimited child category for a parent category.
现在我想要实现的是，让我说我选择电子产品，然后另一个选择框应该出现值列表移动电话和计算机。
然后，如果我选择 Computers ，则会出现另一个选择框，其中包含值列表华硕笔记本电脑。
Now what I'm trying to achieve is, let's say that I choose Electronics, then another selectbox should appear with value list Mobile Phones and Computers.
And then if I choose Computers, another selectbox will appear with the value list Asus Laptop.
我知道如何编码动态选择框，但它不适用于无限的子类别。
I know how to code the dynamic select box, but it doesnt work with unlimited sub-categories.
这个应该是这样的（基于我的想法）。
This one should work like this (based on my thinking).
- 用户从第一个选择框中选择一个类别
- 发送ajax to getcategory.php
- getcategory.php查明用户选择的第一个类别中是否有任何子类别。
- ajax从getcategory接收数据.php
- 如果存在数据，jQuery会创建一个新的选择框并将获取的数据放入其中。
- 用户从中选择子类别刚刚添加了selectbox
- 将ajax发送到getcategory.php
- getcategory.php查明用户选择的子目录中是否还有其他子类别类别。
- ajax从getcategory.php接收数据
- 如果数据存在，jQuery会创建一个新的选择框并将获取的数据放入其中。
- 等等..直到选择框没有子类别。
- User choose a category from the first selectbox
- Send ajax to getcategory.php
- getcategory.php finds out if there is any child category from the user-chosen first category.
- ajax receive data from getcategory.php
- if data exist, jQuery create a new select box and put in the fetched data into it.
- User choose sub-category from the just added selectbox
- Send ajax to getcategory.php
- getcategory.php finds out if there is any more child category from the user-chosen sub-category.
- ajax receive data from getcategory.php
- if data exist, jQuery create a new select box and put in the fetched data into it.
- and so on.. until the selectbox have no child category.
我如何实现这一目标？这是正确的方法吗？或者还有其他解决方法吗？谢谢
How do I achieve this? Is this the right way? or Is there any other workaround for this? Thank you
推荐答案
请使用以下代码
1）conf.php
Please use below code 1)conf.php
<?php
$ conn = mysqli_connect（'localhost'，'root'，'root'，'test'）或死（mysqli_error（$ conn））;？>
$conn = mysqli_connect('localhost','root','root','test') or die(mysqli_error($conn));?>
2）category-dropdown .php
2)category-dropdown.php
<?php
include 'conf.php';
$query = 'SELECT * FROM category WHERE parent_id=0';
$result = mysqli_query($conn,$query);
$data = $result->fetch_all(MYSQLI_ASSOC);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>MultiDropdown</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<select name="category" class="form-control category">
<option value="">Select</option>
<?php
foreach($data as $d){
echo '<option value="'.$d['id'].'">'.$d['category'].'</option>';
}
?>
</select>
</div>
</div>
<div id="dropdown_container"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="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
3)getcategory.php
<?php
include '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($data as $d){
echo '<option value="'.$d['id'].'">'.$d['category'].'</option>';
}
echo '</select>
</div>
</div>';
}
}
?>
这篇关于jQuery ajax基于父类别的无限动态选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
