2016-07-28 14 views
4

に基づいて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 PhonesComputersが表示されるはずです。 Computersを選択すると、別の選択ボックスに値リストAsus Laptopが表示されます。

動的選択ボックスをコーディングする方法はわかっていますが、無制限のサブカテゴリでは機能しません。

これは(私の考えに基づいて)このように動作するはずです。

  1. ユーザーは
  2. getcategory.phpをgetcategory.phpする最初の選択ボックス
  3. 送信アヤックスからカテゴリを選択し、ユーザーが選択した最初のカテゴリからすべての子カテゴリがあるかどうかを知ります。
  4. ajaxはgetcategory.phpからデータを受け取ります
  5. データが存在する場合、jQueryは新しい選択ボックスを作成し、取り込んだデータをその中に入れます。
  6. ユーザーは、ユーザーが選択したサブカテゴリーから任意の複数の子カテゴリがある場合
  7. getcategory.phpを見つけ出しgetcategory.phpに送信アヤックス
  8. 追加した選択ボックスからサブカテゴリを選択します。
  9. ajaxはgetcategory.phpからデータを受け取ります
  10. データが存在する場合、jQueryは新しい選択ボックスを作成し、取り込んだデータをその中に入れます。
  11. などです。選択ボックスに子カテゴリがなくなるまで。

これはどのようにして達成できますか?これは正しい方法ですか?またはこれには他の回避策がありますか?あなたは、単に呼び出す無制限のサブ猫のために(あなたがコーディングに問題がないと述べたとして、あなたがこの問題を持っている理由私はよく分からない)

:問題はないはず無制限のサブ猫を見つけるには、あなたに

+0

をgetcategory.php? 「エレクトロニクス」のみ? –

+0

@MoshFeuテーブル「カテゴリ」データに基づいています。別の「家と家具」を置くと、最初の選択ボックスに2つの値が表示されます –

+0

@MoshFeuそれは親カテゴリをparent_id = 0で認識します –

答えて

0

コード 1の下に使用してください)

conf.php
<?php 

$ CONN = mysqli_connect( 'localhostの'、 'ルート'、 'ルート'、 'テスト')またはダイ(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)は、最初の選択ボックスになりますどのような

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

ありがとうございましたサブ猫またはnullを返すために、同じSQL:

SELECT * FROM category WHERE parent_id = ? 

次のオフトピックです--------------

場合、それは少しのエネルギーが必要になる場合があります選択したカテゴリとそのすべての子のすべての商品を表示するとします。

あなたがあなたのデザインを変更が必要な場合があります:すべての製品を見つける:あなたはより多くを必要とする場合、あなたはなど

ケーススタディ、3桁に増える可能性がある、上記の設計最大99子のために

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

カテゴリ11とそのすべての子であること:

SELECT * FROM products WHERE category_id like '11%' 
+0

このクエリはすべてのサブカテゴリとサブサブのカテゴリを読み込みますが、質問と一致しません – user3099298

関連する問題