如何使用 jQuery、PHP 和 MySQL 动态填充依赖选择菜单？答案

【问题标题】：How to populate dependant select menus dynamically using jQuery, PHP and MySQL?如何使用 jQuery、PHP 和 MySQL 动态填充依赖选择菜单？
【发布时间】：2014-04-06 14:33:41
【问题描述】：

我在这里搜索了很多关于这个主题的内容。但我找不到我的问题的解决方案。如果您能帮助我，我将不胜感激，这是我正在从事的一个学校项目。

我有一个数据库，其中包含一个表（“Main_table”）和包含“sector”和“sub_sector”的列。我想要两个选择框，第一个将在“扇区”列中加载数据库中的所有记录，第二个将在“sub_sector”列中加载数据库中的所有记录，具体取决于第一个选择框的选择值。（例如：如果我在第一个选择框上选择“塑料”，那么第二个选择框应该使用 sub_sector 值更新，其中扇区值等于“塑料”）。

我已经设法从数据库中为第一个选择框加载选项值，但是当我单击任何选择时，它不会将任何选项加载到第二个选择框。您可以在下面找到代码。我没有在下面放“sector_options.php”，因为它似乎工作得很好。

index.html 如下所示：

<script>
$(document).ready(function() { 

$('#filter_sector')
.load('/php/sector_options.php'); //This part works fine - uploads options to the first select box

$('#filter_sector').change(function() {
$('#filter_subsector').load('/php/subsector_options.php?filter_sector=' + $("#filter_sector").val()
} //This part does not work - no options on the second select box
);
});

</script>

<body>
<div id="sectors"><p>Sector:</p>
<select id="filter_sector" name="select_sector" multiple="multiple" size="5"> </select>    
</div> 

<div id="subsectors"><p>Sub Sector:</p>
<select id="filter_subsector" name="select_subsector" multiple="multiple" size="5"> <option value="" data-filter-type="" selected="selected">
-- Make a choice --</option>
</select> 
</div>      

</body>
</html>

sector_options.php 如下所示：

<?php

$link = mysqli_connect("*******", "*******","******","********") or die (mysql_error());

$query = "SELECT sector FROM Main_table ";

$result = mysqli_query($link, $query);

while($row = mysqli_fetch_assoc($result)) {
$options .= "<option value=\"".$row['sector']."\">".$row['sector']."</option>\n  ";
}

echo $options;

?>

subsector_options.php 如下所示：

<?php

$link = mysqli_connect("********", "*****,"*******", "********") or die (mysql_error());

$Sectors = $_REQUEST['filter_sector'];

$query = "SELECT sub_sector FROM Main_table WHERE sector='$Sectors'";

$result = mysqli_query($link, $query);

while($row = mysqli_fetch_assoc($result)) {$options .= "<option value=\"".$row['sub_sector']."\">".$row['sub_sector']."</option>\n  ";
}

echo $options;

?>

【问题讨论】：

您当然可以这样做，但是对于一小组值，使用嵌套菜单要容易得多。看看optgroup - 我个人认为这个功能没有得到充分利用。
哎呀！您的 AJAX 脚本有 SQL 注入错误。如果您继续这样做，请查看mysqli_real_escape_string，或者 - 更好的是 - 使用参数化。
对不起，我以前没有使用过 Ajax，所以我看不到我做错了什么。上面的代码适用于第一个选择框，但不适用于第二个选择框。那里有我应该删除/添加/更正的路线吗？感谢您的帮助，
一个 optgroup 不合适？它明显更简单，并且完全不需要 AJAX。
谢谢老兄，你帮了大忙。

标签： php jquery mysql database cascadingdropdown

【解决方案1】：

为了完整起见，解决方案是：

使用浏览器网络监视器检查 AJAX 操作的执行情况
在浏览器标签中加载 AJAX 提取器脚本 - 在许多情况下，它们会在那里非常愉快地呈现，从而使它们更易于调试
返回用于注入的 HTML 的 AJAX 脚本应该仅返回该 HTML，而不是完整的 HTML 文档。

【讨论】：