基于父类别的jQuery ajax无限动态选择框
Posted
技术标签:
【中文标题】基于父类别的jQuery ajax无限动态选择框【英文标题】：jQuery ajax unlimited dynamic selectbox based on parent categories 【发布时间】：2016-12-02 07:21:21 【问题描述】：我有一个类别表：
| 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
所以这个表能够为父类别存储无限的子类别。
现在我要实现的是，假设我选择电子，然后应该出现另一个选择框，其中包含值列表 Mobile Phones 和 Computers。
然后如果我选择Computers，就会出现另一个选择框，其中包含值列表Asus Laptop。
我知道如何编写动态选择框，但它不适用于无限的子类别。
这个应该像这样工作（基于我的想法）。
用户从第一个选择框中选择一个类别 发送ajax到getcategory.php getcategory.php 从用户选择的第一个类别中找出是否有任何子类别。 ajax 从 getcategory.php 接收数据 如果数据存在，jQuery会创建一个新的选择框并将获取的数据放入其中。 用户从刚刚添加的选择框中选择子类别 发送ajax到getcategory.php getcategory.php 从用户选择的子类别中找出是否还有更多子类别。 ajax 从 getcategory.php 接收数据 如果数据存在，jQuery会创建一个新的选择框并将获取的数据放入其中。 以此类推..直到选择框没有子类别。
我如何实现这一目标？这是正确的方法吗？或者还有其他解决方法吗？谢谢
【问题讨论】：
第一个选择框中会是什么？只有Electronics?
@MoshFeu 基于表“类别”数据。如果我放另一个“家居和家具”，那么第一个选择框中会有2个值
@MoshFeu 它通过 parent_id=0 识别父类别
我明白这一点。 Home and Furnishing 也将是 parent_id 0？
@MoshFeu 是的，所有第一个类别的 parent_id=0
【参考方案1】：
请使用以下代码 1)conf.php
<?php
$conn = mysqli_connect('localhost','root','root','test') or die(mysqli_error($conn));?>
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
<?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>';
?>
【讨论】：
【参考方案2】：找到无限的子猫应该没问题：（我不知道你为什么会遇到这个问题，因为你说你编码没有问题）
对于无限的子猫，您只需调用相同的 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
以上设计最多99个孩子，如果你需要更多，你可能会增加到3位数，等等
案例研究：查找属于第 11 类的所有产品及其所有子项：
SELECT * FROM products WHERE category_id like '11%'
【讨论】：
此查询将加载所有子类别和子子类别，它与问题不匹配以上是关于基于父类别的jQuery ajax无限动态选择框的主要内容，如果未能解决你的问题，请参考以下文章