php - 根据第一个动态下拉列表中的选择填充第二个动态下拉列表的 Ajax 方法

Question

我以前没怎么用过Ajax，这看起来很简单。我有拼图的各个部分，但不知道如何将它们组合在一起。

两个下拉列表均从数据库填充，第一个下拉列表使用以下代码填充:

<?php
$sql = "SELECT title, nid FROM node where type= 'hotel'";
$hotels = mysql_query($sql);
?>
<select name="hotels" id="hotels">
<?php
while($row = mysql_fetch_array($hotels))
{
  echo "<option value=\"".$row['nid']."\">".$row['title']."\n  ";
}
?>
</select>

第二个下拉列表应根据上面选择的值进行填充。所以基本上我想获取所选项目的 ID，然后在查询中使用它来填充第二个下拉列表。

我将使用上面的代码，但使用以下 SQL 查询:

SELECT title, nid from node where type = 'season' AND hotel_nid = X

其中 X 是第一个下拉列表中 selectedIndex 的 ID。

虽然代码可以工作，但我不知道如何将两者结合起来。我可以使用 Javascript 通过打印代码来修改名为“seasons”的 div 的 InnerHTML，以检索和显示下拉列表。

但是有没有更好的方法可以让两个下拉列表都可见，但第二个下拉列表在第一个下拉列表完成之前被禁用？

Answer 1

当用户更改第一个下拉列表的值时，应通过 Ajax 调用填充第二个列表的 PHP 脚本。所以你应该添加 onchange="myFunctionToPopulate(this.value);"到第一个下拉菜单。

如果您不知道如何做到这一点，我建议您也使用 JS 库，例如 jQuery，我们将向您发布实现此目的的简单代码。

已编辑

使用 jQuery，您可以执行以下操作:

<select name="first_dropdown" onchange="$('#dropdown2_container').load('your_script.php?nid='+this.value);">
  <option....
</select>
...
<div id="dropdown2_container" style="display:none"> </div>

your_script.php 将返回整个选择标记。