从不同的表AJAX /使用Javascript / PHP的三重下拉菜单菜单、不同、Javascript、AJAX
我一直在寻找了这么多天，但还是没能找到答案。
I've been searching for this for so many days but still couldn't figure it out.
我想打一个下拉菜单，用于搜索和流量会是这样：
I want to make a drop down menu for searching and the flow would be like this:
搜寻方式：
分类
品牌
位置
公司
所有者
和一旦用户点击任何上述情况，在第二下拉应根据第一下拉显示各列表：
And once the user click any of the above, the 2nd DropDown should display the respective list according to the 1st DropDown:
例如，第一个下拉=类别：
For example, 1st DropDown = Category:
限制方式：
笔记本电脑
桌面
路由器
LCD
扫描仪
1日或下拉=品牌：
限制方式：
戴尔
索尼
HP
三星
宏基
和第三个下拉菜单将是为了通过第一下拉列表中，这样的：
And the 3rd DropDown menu will be the Order By the 1st DropDown, like:
排序：
分类
品牌
位置
公司
所有者
我的问题是，在第一下拉每个选项都有它自己的表，这将引发第二个下拉菜单中，不知何故，我无法弄清楚如何称呼它。所有教程和放大器;我发现的例子，它们触发的东西在第一下拉菜单这是在1台＆安培;第二和放大器; 3下拉可以调用另一个表。 （例如：国家，州，市）。
My problem is, every option in 1st DropDown has its own table, and that would trigger 2nd DropDown menu, and somehow that I can't figure out how to call it. All tutorials & examples that I found, they trigger something in 1st DropDown menu which is within 1 table & 2nd & 3rd DropDown could call another table. (For example: Country, State, City).
所以，我想知道这是可能的，其中第一个下拉菜单是从不同的表，第二个下拉菜单，将填充在第一下拉菜单选项choosen，和第3个下拉菜单命令与第一下拉列表中的第二个下拉菜单菜单选项。
Therefore, I want to know if this is possible, where the 1st DropDown menu is from different tables, 2nd DropDown menu will populate from the 1st DropDown menu option choosen, and 3rd DropDown menu will order the 2nd DropDown menu with 1st DropDown menu option.
我希望你明白我在问什么，我真的很希望得到的反馈很快，它是如此迫切需要的。 谢谢你，我真的AP preciate吧！
I hope you understand what I'm asking and I really hope to get the feedback very soon, it's so much needed. Thank you and I really appreciate it!
search.html
search.html
.....
<form id="drop_list" name="drop_list" action="searchedasset.php" method="post" >
<fieldset><table><tr>
<thead>
<tr><legend><b>SEARCH ASSET</b></legend></tr>
</thead>
<tbody>
<tr> <!--code for the first list box-->
<td>Search By :</td>
<td><select name="cat_id" onChange="SelectSubCat1();" >
<Option value="">Choose Search By</option>
</SELECT>
</td>
</tr>
<tr>
<td>Limit By :</td>
<td><select id="SubCat1" name="SubCat1">
<Option value="">Choose Limit By</option>
</SELECT>
</td>
</tr>
<tr>
<td>Order By :</td>
<td><select name="SubCat2">
<option value="">Choose Order By</option>
<option value="1">Brand </option>
<option value="2">Category </option>
<option value="3">Project </option>
</select>
</td>
</tr>
</tbody>
</tr></table></fieldset>
.....
search.js
search.js
function fillSearch(){
// this function is used to fill the category list on load
addOption(document.drop_list.cat_id, "1", "Brand", "");
addOption(document.drop_list.cat_id, "2", "Category", "");
addOption(document.drop_list.cat_id, "3", "Project", "");
}
function SelectSubCat1(){
// ON selection of category this function will work
removeAllOptions(document.drop_list.SubCat1);
//clear all the elements of the second list
addOption(document.drop_list.SubCat1, "", "Choose Limit By", "");
if(document.drop_list.cat_id.value == '1'){
addOption(document.drop_list.SubCat1,"1", "DELL");
addOption(document.drop_list.SubCat1,"2", "ACER");
addOption(document.drop_list.SubCat1,"3", "SONY");
addOption(document.drop_list.SubCat1,"4", "SAMSUNG");
addOption(document.drop_list.SubCat1,"5", "APPLE");
}
if(document.drop_list.cat_id.value == '2'){
addOption(document.drop_list.SubCat1,"='1'", "Notebook");
addOption(document.drop_list.SubCat1,"2", "Desktop");
addOption(document.drop_list.SubCat1,"3", "LCD Projector");
addOption(document.drop_list.SubCat1,"4", "Scanner");
addOption(document.drop_list.SubCat1,"5", "Printer");
}
if(document.drop_list.cat_id.value == '3'){
addOption(document.drop_list.SubCat1,"1", "1st Purchase");
addOption(document.drop_list.SubCat1,"2", "2nd Purchase");
addOption(document.drop_list.SubCat1,"3", "3rd Purchase");
addOption(document.drop_list.SubCat1,"4", "4th Purchase");
addOption(document.drop_list.SubCat1,"5", "5th Purchase");
}
}
}
.....
注意SubCat1据说是从3占据着不同的名称不同的表：
Note that SubCat1 was supposedly from 3 different tables which hold different name:
例如。 [cat_id.value =='1'，SubCat1 =='brandid'] [cat_id.value =='2'，SubCat1 =='类别ID'] [cat_id.value =='3'，SubCat1 =='purchaseid' ]
e.g. [cat_id.value == '1', SubCat1 == 'brandid'][cat_id.value == '2', SubCat1 == 'categoryid'][cat_id.value == '3', SubCat1 == 'purchaseid']
因此，有没有什么办法，我们能做到吗？相应地更改SubCat1他们的名字在数据库中？这是为了显示在下一个页面的数据。谢谢你。
Therefore, is there any way we can do that? To change the SubCat1 accordingly to their name in the database? This is to display the data in the next page. Thank you.
推荐答案
林不知道，如果JS语法是正确的，但这个想法是在这里：
im not sure if js syntax are correct but the idea is here:
<?php
$category = //result from table category
$brands= //result from table category
?>
<script>
var categories = <?php json_encode($category);?>
var brands= <?php json_encode($brands);?>
</script>
<select id="categories_selector" onchange="populateBrand(this.value)">
</option value="">Select Category</option>
</option value="1">Cat 1</option>
...
</option value="2">Cat 2</option>
</select>
<select id="brands_selector">
//no options yet
</select>
<script>
function populateBrand(category_id)
{
var aOptions = [];
for(var i in brands)
if(brands[i].category == category_id)
{
var oOption = document.createElement('option');
oOption.id = brands[i].id;
oOption.value = brands[i].name;
aOptions.push(oOption);
}
var oBrands = document.getElementById('brands_selector');
oBrands.addOptions(aOptions);
}
</script>
