Php 基于父类别的jQuery ajax无限动态选择框_Php_Jquery_Html_Mysql_Ajax

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

php jquery html mysql ajax

Php 基于父类别的jQuery ajax无限动态选择框,php,jquery,html,mysql,ajax,Php,Jquery,Html,Mysql,Ajax,我有一张分类表： | 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

我有一张分类表：

| 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

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

现在我想要实现的是，假设我选择了电子产品，那么另一个选择框应该会出现，上面有手机和电脑的价值列表。然后，如果我选择计算机，另一个选择框将显示Asus笔记本电脑的值列表

我知道如何对动态选择框进行编码，但它不适用于无限子类别

根据我的想法，这个应该是这样的

用户从第一个选择框中选择一个类别将ajax发送到getcategory.php php会从用户选择的第一个类别中找出是否有任何子类别。 ajax从getcategory.php接收数据如果数据存在，jQuery将创建一个新的选择框，并将获取的数据放入其中。用户从刚刚添加的选择框中选择子类别将ajax发送到getcategory.php getcategory.php会从用户选择的子类别中找出是否还有子类别。 ajax从getcategory.php接收数据如果数据存在，jQuery将创建一个新的选择框，并将获取的数据放入其中。等等直到选择框没有子类别。

我如何做到这一点？这条路对吗？或者还有其他解决办法吗？谢谢你

找到无限子猫应该没有问题：我不知道你为什么会有这个问题，因为你说你在编码方面没有问题

对于无限子类别，只需调用相同的SQL即可返回子类别或null：

SELECT * FROM category WHERE parent_id = ?

以下是离题的-------

如果要显示选定类别的所有产品及其所有子项，可能需要一点精力

您可能需要将设计更改为：

id     category
------ ----------
11     Electronics
1101   Mobile Phones
1102   Computers
110101 Iphone
110102 Samsung Galaxy
110201 Asus Laptop

对于以上设计的max 99 child，如果您需要更多，您可能会增加到3位数，等等

案例研究：查找类别11中的所有产品及其所有子产品：

SELECT * FROM products WHERE category_id like '11%'

请使用下面的代码 1conf.php

<?php

$conn=mysqli\u connect'localhost'、'root'、'root'、'test'或diemysqli\u错误$conn；？>

2category-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>

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

第一个选择框中会显示什么？仅电子产品？@MoshFeu基于表格类别数据。如果我把另一个放在家里和家具上，那么第一个里面会有两个值selectbox@MoshFeu它通过parent_id=0识别父类别我理解这一点。家居和家具也将是父类\u id 0？@MoshFeu-yup所有第一个类别都将具有父类\u id=0此查询将加载所有子类别和子类别，它与问题不匹配