Ajax+PHP动态联动下拉菜单失效问题排查求助

云上老周

2026-5-29

动态联动下拉列表故障排查：第二个下拉无选项显示

我尝试用Ajax和PHP实现一个动态联动下拉列表——第一个下拉选择ID后，第二个下拉应该展示对应ID的名称列表，但目前第一个下拉正常，第二个下拉完全没有选项显示。选择ID=1时，本应显示Name1和Name3，但实际没有任何内容。

我的代码文件

select1.php

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="select_style.css"> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript"> 
function fetch_select(val) { 
    $.ajax({ 
        type: 'post', 
        url: 'fetch1.php', 
        data: { get_option:val }, 
        success: function (response) { 
            document.getElementById("new_select").innerHTML=response; 
        } 
    }); 
} 
</script> 
</head> 
<body> 
<p id="heading">Dynamic Select Option Menu Using Ajax and PHP</p> 
<center> 
<div id="select_box"> 
<select onchange="fetch_select(this.value);"> 
<option>Select ID</option> 
<?php 
$host = 'localhost'; 
$user = 'admin'; 
$pass = 'admin'; 
$dbname='kancha'; 
$conn = new mysqli($host, $user, $pass, $dbname); 
// Check connection 
if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 
$sql = "select distinct id from test"; 
$select= $conn->query($sql); 
if ($select->num_rows > 0) { 
    while($row = $select->fetch_assoc()) { 
        echo "<option value='".$row['id']."'>".$row['id']."</option>"; 
    } 
} else { 
    echo "0 results"; 
} 
?> 
</select> 
<select id="new_select"> 
</select> 
</div> 
</center> 
</body> 
</html>

fetch1.php

<?php 
if(isset($_POST['get_option'])) { 
    $host = 'localhost'; 
    $user = 'admin'; 
    $pass = 'admin'; 
    $dbname='kancha'; 
    $conn = new mysqli($host, $user, $pass, $dbname); 
    // Check connection 
    if ($conn->connect_error) { 
        die("Connection failed: " . $conn->connect_error); 
    } 
    $id = $_POST['get_option']; 
    $sql = "select id, name from test where id='$id'";; 
    $find= $conn->query($sql); 
    if ($find->num_rows > 0) { 
        while($row = $find->fetch_assoc()) { 
            echo "<option value='".$row['id']."'>".$row['name']."</option>"; 
        } 
    } else { 
        echo "0 results"; 
    } 
    exit; 
} 
?>

数据库结构

SELECT * from test;
id  name
1   Name1
2   Name2
1   Name3

问题排查与解决方案

我来帮你一步步定位问题：

1. 先修复代码中的明显错误

首先看fetch1.php里的SQL语句，结尾多了一个分号：

$sql = "select id, name from test where id='$id'";;

改成：

$sql = "select id, name from test where id='$id'";

这个多余的分号可能导致SQL解析出错，直接返回空结果。

2. 检查Ajax请求是否正常发送

打开浏览器的开发者工具（按F12），切换到Network标签，然后选择第一个下拉的ID，观察是否有fetch1.php的请求：

如果没有请求：说明fetch_select函数没触发，先检查jQuery是否正确加载（确认js/jquery.js路径正确，或者临时换成CDN版本<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>测试），同时检查onchange事件是否绑定正确。
如果有请求：查看请求的Response内容，如果显示0 results，说明SQL查询没返回数据；如果返回了<option>标签，说明JavaScript插入DOM的代码有问题。

3. 优化SQL查询（同时避免SQL注入）

当前的SQL语句直接把$_POST['get_option']拼进去，存在SQL注入风险，而且ID是数字类型，不需要加单引号，换成预处理语句更安全可靠：

$id = $_POST['get_option'];
$sql = "select id, name from test where id = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("i", $id); // 绑定整数类型参数
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "<option value='".$row['id']."'>".$row['name']."</option>";
    }
} else {
    echo "<option>No names found</option>";
}
$stmt->close();

4. 给Ajax添加错误处理

在Ajax里加入error回调，方便排查请求失败的具体原因：

function fetch_select(val) { 
    $.ajax({ 
        type: 'post', 
        url: 'fetch1.php', 
        data: { get_option:val }, 
        success: function (response) { 
            document.getElementById("new_select").innerHTML=response; 
        },
        error: function(xhr, status, error) {
            console.log("请求出错：", status, error);
            console.log("响应内容：", xhr.responseText);
        }
    }); 
}

这样在浏览器控制台就能直接看到请求失败的细节，快速定位问题。

5. 测试fetch1.php直接访问

你可以用Postman或者浏览器插件，以POST方式传递get_option=1直接访问fetch1.php，看返回的内容是不是正确的<option>标签。如果返回正确，那问题就在前端的Ajax处理；如果返回错误，就继续排查PHP和数据库连接的问题。

按照上面的步骤排查，应该能解决第二个下拉无选项的问题。

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