如何实现HTML下拉列表联动？附现有代码寻求技术支持

嘿，我看你正在做两个下拉列表的联动功能，现有代码里的onchange属性写法有问题，咱们一步步来修复并实现完整的联动效果：

1. 修正前端HTML结构 #

首先调整第一个下拉框的onchange事件，让它调用一个JavaScript函数，同时添加第二个下拉框的初始结构：

<td>
  <!-- 第一个下拉框：绑定location表 -->
  <select name="fromLocation" id="fromLocation" onchange="updateProducts(this.value)" style="width:150px;">
    <option value='0'>- Select an item - </option>
    <?php 
    require 'dbConnect.php'; 
    $result = mysqli_query($connection, "SELECT * FROM location"); 
    while($row = mysqli_fetch_array($result)) { 
        echo "<option value='" . $row['location'] . "'>" . $row['location'] . "</option>"; 
    } 
    ?>
  </select>
</td>
<td>
  <!-- 第二个下拉框：动态加载对应产品 -->
  <select name="product" id="product" style="width:150px;">
    <option value='0'>- Select location first - </option>
  </select>
</td>

2. 编写JavaScript联动逻辑 #

添加一段JavaScript代码，当第一个下拉框选项改变时，通过AJAX请求后端接口，获取对应的产品列表并更新第二个下拉框：

function updateProducts(selectedLocation) {
  const productSelect = document.getElementById('product');
  
  // 如果用户选择了默认选项，重置第二个下拉框
  if (selectedLocation === '0') {
    productSelect.innerHTML = '<option value="0">- Select location first - </option>';
    return;
  }

  // 用fetch发送AJAX请求（也可以用XMLHttpRequest，这里用更现代的fetch）
  fetch(`getProductsByLocation.php?location=${encodeURIComponent(selectedLocation)}`)
    .then(response => response.text())
    .then(data => {
      // 更新第二个下拉框的选项
      productSelect.innerHTML = data;
    })
    .catch(error => {
      console.error('加载产品列表出错:', error);
      productSelect.innerHTML = '<option value="0">- 加载失败 - </option>';
    });
}

3. 编写后端PHP接口（getProductsByLocation.php） #

创建这个PHP文件，用来接收选中的location参数，查询product表并返回对应的选项HTML：

<?php
require 'dbConnect.php';

// 验证并获取传入的location参数
$location = isset($_GET['location']) ? $_GET['location'] : '';

// 用预处理语句防止SQL注入，这很重要！
$stmt = mysqli_prepare($connection, "SELECT * FROM product WHERE location = ?");
mysqli_stmt_bind_param($stmt, "s", $location);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

// 生成选项HTML
echo '<option value="0">- Select a product - </option>';
while($row = mysqli_fetch_array($result)) {
    // 请根据你的product表实际字段修改product_id和product_name
    echo "<option value='" . $row['product_id'] . "'>" . $row['product_name'] . "</option>";
}

// 关闭连接和语句
mysqli_stmt_close($stmt);
mysqli_close($connection);
?>

几个重要注意事项 #

• SQL注入防护：一定要用预处理语句（就像上面的代码那样），不要直接把用户输入拼接到SQL语句里，避免安全风险。
• 字段适配：PHP代码里的product_id和product_name需要替换成你自己product表的实际字段名。
• 用户体验：保留初始状态的提示文本，让用户清楚操作流程。
• 错误处理：AJAX请求失败时，给用户显示友好提示，同时控制台打印错误方便调试。

内容的提问来源于stack exchange，提问作者Peter