如何在第一个或第二个下拉框值变化时用PHP和jQuery加载第三个下拉框数据

算力阿峰

2026-8-1

联动下拉框的jQuery修正方案

第三个下拉框内容依赖前两个下拉框的选中值，需要在第一个或第二个下拉框值变化时，向third.php发送请求并加载数据到第三个下拉框。你的问题出在jQuery事件绑定的语法错误上，以下是修正方案：

你的HTML代码

<select name="first" id="first">
 <option value="1">Item 1</option>
 <option value="2">Item 2</option>
</select>

<select name="second" id="second">
 <option value="1">Item 1</option>
 <option value="2">Item 2</option>
</select>

<select name="third" id="third">
 <!-- 这里会在下拉框变化时加载数据 -->
</select>

错误代码问题分析

你尝试用||连接两个change事件的写法不符合jQuery语法规范，无法正确绑定事件。需要将两个下拉框元素合并到同一个选择器中，或者为它们绑定同一个处理函数。

修正后的jQuery代码

$(function(){
  // 为第一个和第二个下拉框绑定同一个change事件处理函数
  $("#first, #second").change(function(){
    // 获取两个下拉框的当前选中值
    let firstVal = $("#first").val();
    let secondVal = $("#second").val();
    
    // 发送POST请求到后端接口
    $.post("third.php", {first: firstVal, second: secondVal}, function(data){
      // 将返回的数据填充到第三个下拉框中
      $("#third").html(data);
    });
  });  
});