1st DropDown

搜索者：

分类

品牌

位置

供应商

所有者

一旦用户点击上述任何一项，第二个DropDown应根据第一个DropDown显示相应的列表：

例如，1st DropDown = Category：

2nd DropDown

限制依据：

笔记本

桌面

路由器

LCD

扫描仪

或1st DropDown =品牌：

2nd DropDown

限制依据：

戴尔

索尼

HP

三星

宏

第三个DropDown菜单将是Order By the 1st DropDown，如：

3rd DropDown

订购方式：

分类

品牌

位置

供应商

所有者

我的问题是，1st DropDown中的每个选项都有自己的表，这会触发第二个DropDown菜单，不知怎的，我无法弄清楚如何调用它。所有教程＆amp;我发现的例子中，它们在1st DropDown菜单中触发了一些内容，该菜单位于1表和1之内。第二＆amp; 3rd DropDown可以调用另一个表。（例如：国家，州，市）。

因此，我想知道这是否可行，其中第一个DropDown菜单来自不同的表，第二个DropDown菜单将从第一个DropDown菜单选项中选择填充，第三个DropDown菜单将命令第一个DropDown菜单使用1st DropDown菜单选项。

我希望你明白我在问什么，我真的希望很快得到反馈，这是非常需要的。谢谢，我真的很感激！

EDITED

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

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个不同名称的表：

e.g。 [cat_id.value =='1'，SubCat1 =='brandid'] [cat_id.value =='2'，SubCat1 =='categoryid'] [cat_id.value =='3'，SubCat1 =='purchaseid' ]

因此，我们有什么方法可以做到这一点？要相应地更改SubCat1在数据库中的名称？这是为了在下一页显示数据。谢谢。

Answer 1

我不确定js语法是否正确，但想法在这里：

<?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>

Answer 2

您可以通过为任务构建有效视图来实现此目的。该视图应基于如下结构：

column1 column2 column3

（{Category}，{笔记本电脑，台式机，路由器，LCD，扫描仪}，{类别，品牌，位置，供应商，所有者}），（{品牌}，{戴尔，索尼，惠普，三星，宏碁}，{类别，品牌，位置，供应商，所有者}等等。

对于第2列和第3列，您可以调用函数，如group_concat（如果您正在使用mysql）或其他数据库中的类似函数。

一旦可用，您就可以轻松填充列表。将Column1数据加载到第一个下拉列表。当它发生变化时，根据该选择检索column2和column3，并将它们加载到dropdown2和dropdown3中。您需要将column2和column3的内容拆分为数组并加载它们。

这是否解决了您的问题？

您可以这样继续：好吧，你不能直接从数据库生成所有东西。

您需要拆分该流程。对于渲染过程，您需要在一定程度上从数据库中获取所需的数据，并使用它来修改其他信息。

我可以这样说：

使用所需的格式和连接定义数据库中的视图以进行初始上拉。
使用脚本语言检索数据，在本例中恰好是php。
通过获取相应的查询来加载所需信息来格式化检索到的数据。
将其与ajax端的例程交叉链接，例如，在下拉列表中更改以获取相应的数据。

你需要在php和ajax中有单独的函数来建模，即一个加载第一个下拉列表，一个加载第二个和第三个下拉列表。用php和ajax映射它，你的问题应该消失了。

希望这会给你一个想法！

来自不同表格的AJAX / Javascript / PHP三重下拉菜单

1st DropDown

2nd DropDown

2nd DropDown

3rd DropDown

EDITED

2 个答案: