jQuery的AJAX無限的動態選擇框

我有類別表：jQuery的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 Phones和Computers之間。然後，如果我選擇Computers，則會出現另一個選擇框，其值列表爲Asus Laptop。

我知道如何編碼動態選擇框，但它不適用於無限的子類別。

這個應該像這樣工作（基於我的想法）。

用戶選擇從第一選擇框類別

發送Ajax來getcategory.php

getcategory.php發現如果從用戶選擇的第一類的任何子類。

ajax從getcategory.php接收數據

如果數據存在，jQuery創建一個新的選擇框並將提取的數據放入它中。

用戶從剛添加的選擇框

發送AJAX選擇子類別getcategory.php

getcategory.php發現如果從用戶選擇的子類別中的任何更多的子類別。

ajax從getcategory.php接收數據

如果數據存在，jQuery創建一個新的選擇框並將提取的數據放入它中。

等等。直到選擇框沒有子類別。

我該如何做到這一點？這是正確的方式嗎？或者有沒有其他的解決方法呢？謝謝

來源

2016-07-28 Redzwan Latif

什麼將是第一選擇框？只有'電子'？ –

@MoshFeu基於表「類別」數據。如果我把另一個「家居和傢俱」，那麼將有2個值在第一個選擇框 –

@MoshFeu它通過parent_id = 0 –

請使用下面的代碼 1）conf.php

<?php

$康恩= mysqli_connect（ '本地主機'， '根'， '根'， '測試'）或死亡（mysqli_error（$康恩））;？>

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

來源

2016-07-28 06:34:10 sunilwananje

要找到無限次的貓應該是沒有問題的：（我不能確定，爲什麼你有這樣的問題，因爲你說你在編碼沒問題）

對於無限次的貓，你簡單地調用相同的SQL返回子貓或空：

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%'

來源

2016-07-28 05:08:16 SIDU

此查詢將加載所有子類別和子子類別，它與該問題不匹配 – user3099298

jQuery的AJAX無限的動態選擇框

回答

相關問題