我已经找了这么多天了，还是没弄明白。

我想制作一个用于搜索的下拉菜单，流程是这样的:

第一个下拉菜单

搜索方式:

Category

Brand

Location

Supplier

Owner

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

例如，第一个 DropDown = 类别:

第二个下拉菜单

限制条件:

Laptop

Desktop

Router

LCD

Scanner

或者第一个 DropDown = 品牌:

第二个下拉菜单

限制条件:

Dell

Sony

HP

Samsung

Acer

第三个下拉菜单将是第一个下拉菜单的顺序，例如:

第三个下拉列表

订购方式:

Category

Brand

Location

Supplier

Owner

我的问题是，第一个 DropDown 中的每个选项都有自己的表格，这会触发第二个 DropDown 菜单，不知何故我不知道如何调用它。我发现的所有教程和示例，它们在 1st DropDown 菜单中触发某些内容，该菜单位于 1 个表中，而 2nd 和 3rd DropDown 可以调用另一个表。 (例如:国家、州、城市)。

因此，我想知道这是否可能，第一个 DropDown 菜单来自不同的表，第二个 DropDown 菜单将从选择的第一个 DropDown 菜单选项填充，第三个 DropDown 菜单将使用第一个 DropDown 排序第二个 DropDown 菜单菜单选项。

我希望您能理解我的要求，我真的希望能尽快得到反馈，这是非常需要的。 谢谢你，我真的很感激!

已编辑

搜索.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>
.....

搜索.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 个不同的表，它们具有不同的名称:

例如[cat_id.value == '1', SubCat1 == 'brandid'][cat_id.value == '2', SubCat1 == 'categoryid'][cat_id.value == '3', SubCat1 == 'purchaseid' ]

那么，有什么办法可以做到吗？要将 SubCat1 相应地更改为数据库中的名称？这是为了在下一页显示数据。谢谢。

最佳答案

我不确定 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>

关于php - 来自不同表格的 AJAX/Javascript/PHP 三重下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8584795/