jQuery ajax基于父类

时间:2016-07-28 04:40:44

标签: 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   | 3

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

现在我想要实现的是,让我们说我选择电子产品,然后另一个选择框应该显示值列表Mobile PhonesComputers。 然后,如果我选择Computers,则会显示另一个选择框,其中包含值列表Asus Laptop

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

这个应该像这样(基于我的想法)。

  
      
  1. 用户从第一个选择框中选择一个类别
  2.   
  3. 将ajax发送到getcategory.php
  4.   
  5. getcategory.php查明用户选择的第一个类别中是否有任何子类别。
  6.   
  7. ajax从getcategory.php
  8. 接收数据   
  9. 如果存在数据,jQuery会创建一个新的选择框并将获取的数据放入其中。
  10.   
  11. 用户从刚刚添加的选择框中选择子类别
  12.   
  13. 将ajax发送到getcategory.php
  14.   
  15. getcategory.php查明用户选择的子类别中是否还有其他子类别。
  16.   
  17. ajax从getcategory.php
  18. 接收数据   
  19. 如果存在数据,jQuery会创建一个新的选择框并将获取的数据放入其中。
  20.   
  21. 依此类推..直到选择框没有子类别。
  22.   

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

2 个答案:

答案 0 :(得分:1)

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

<?php

$ conn = mysqli_connect(&#39; localhost&#39;,&#39; root&#39;,&#39; root&#39;&#39; test&#39;)或死亡(mysqli_error($康涅狄格州));?&GT;

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

答案 1 :(得分:0)

要找到无限的子猫应该没问题:(我不知道为什么你有这个问题,因为你说你没有编码问题)

对于无限子猫你只需调用相同的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%'