php – 基于父类别的jQuery ajax无限动态选择框

发布时间：2020-12-13 16:05:06 所属栏目：PHP教程来源：网络整理

导读：我有一个类别表： | 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 因此,该表能够为父类别存储无限的子类别. 现在我想要实现的是

我有一个类别表：

| 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

因此,该表能够为父类别存储无限的子类别.

现在我想要实现的是,让我们说我选择电子产品,然后另一个选择框应该出现值列表移动电话和计算机.
然后,如果我选择计算机,另一个选择框将显示值列表华硕笔记本电脑.

我知道如何编码动态选择框,但它不适用于无限的子类别.

这个应该是这样的(根据我的想法).

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.

我该如何实现这一目标？这是正确的方法吗？或者还有其他解决方法吗？谢谢

解决方法

请使用以下代码
1)conf.php

<?php

$conn = mysqli_connect(‘localhost’,’root’,’test’)或die(mysqli_error($conn));？>

2)类别的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

<?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>';
}
}
?>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!