技术咨询：如何修改现有基于ID的动态联动下拉框代码，实现基于国家名称的关联查询

别担心，新手阶段遇到这种数据关联方式的转换完全正常！我们一步步来调整代码，适配你新的基于名称关联的表结构，实现国家→州→城市的动态联动下拉。

1. 前端HTML代码修改 #

主要是调整下拉框的value值，从原来的ID改成对应的名称，这样后端才能接收到名称参数进行查询：

<?php
// Include the database connection file
include('db_config.php');
?>
<html>
<head>
<title>Dynamic Dependent Select Box using jQuery, Ajax and PHP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h3>Dynamic Dependent Select Box</h3>
<br />
<form action="" method="post">
<div class="col-md-4">
<!-- Country dropdown -->
<label for="country">Country</label>
<select class="form-control" id="country">
<option value="">Select Country</option>
<?php
$query = "SELECT * FROM countries";
$result = $con->query($query);
if ($result->num_rows > 0) {
 while ($row = $result->fetch_assoc()) {
     // 把value从id改成country_name
     echo '<option value="'.$row['country_name'].'">'.$row['country_name'].'</option>';
 }
}else{
 echo '<option value="">Country not available</option>';
}
?>
</select>
<br />
<!-- State dropdown -->
<label for="state">State</label>
<select class="form-control" id="state">
<option value="">Select State</option>
</select>
<br />
<!-- City dropdown -->
<label for="city">City</label>
<select class="form-control" id="city">
<option value="">Select City</option>
</select>
</div>
</form>
</div>
</body>
</html>

2. JS代码修改 #

调整AJAX请求的参数名和传递的值，从原来的ID改成名称：

<script type="text/javascript">
$(document).ready(function(){
// Country dependent ajax
$("#country").on("change",function(){
 var countryName = $(this).val();
 $.ajax({
 url :"action.php",
 type:"POST",
 cache:false,
 // 参数名从countryId改成countryName
 data:{countryName:countryName},
 success:function(data){
 $("#state").html(data);
 $('#city').html('<option value="">Select city</option>');
 }
 });
});
// state dependent ajax
$("#state").on("change", function(){
 var stateName = $(this).val();
 $.ajax({
 url :"action.php",
 type:"POST",
 cache:false,
 // 参数名从stateId改成stateName
 data:{stateName:stateName},
 success:function(data){
 $("#city").html(data);
 }
 });
});
});
</script>

3. 后端action.php代码修改 #

这部分是核心：要修改SQL查询条件，从ID匹配改成名称匹配，非常重要的是要使用预处理语句防止SQL注入（直接拼接用户输入会有安全风险）。

<?php
// Include the database connection file
include('db_config.php');

// 处理国家→州的请求
if (isset($_POST['countryName']) && !empty($_POST['countryName'])) {
    // 使用预处理语句，避免SQL注入
    $query = "SELECT * FROM states WHERE country_name = ?";
    $stmt = $con->prepare($query);
    $stmt->bind_param("s", $_POST['countryName']); // "s"表示字符串类型参数
    $stmt->execute();
    $result = $stmt->get_result();

    if ($result->num_rows > 0) {
        echo '<option value="">Select State</option>';
        while ($row = $result->fetch_assoc()) {
            // 州的下拉框value设置为state_name，供后续城市查询使用
            echo '<option value="'.$row['state_name'].'">'.$row['state_name'].'</option>';
        }
    } else {
        echo '<option value="">State not available</option>';
    }
    $stmt->close();
} 
// 处理州→城市的请求
elseif(isset($_POST['stateName']) && !empty($_POST['stateName'])) {
    $query = "SELECT * FROM cities WHERE state_name = ?";
    $stmt = $con->prepare($query);
    $stmt->bind_param("s", $_POST['stateName']);
    $stmt->execute();
    $result = $stmt->get_result();

    if ($result->num_rows > 0) {
        echo '<option value="">Select city</option>';
        while ($row = $result->fetch_assoc()) {
            echo '<option value="'.$row['city_name'].'">'.$row['city_name'].'</option>';
        }
    } else {
        echo '<option value="">City not available</option>';
    }
    $stmt->close();
}
?>

额外提醒 #

• 确保你的数据库连接文件db_config.php配置正确，能正常连接到MySQL数据库。
• 预处理语句是必须的：用户输入的名称可能包含特殊字符（比如空格、引号），直接拼接SQL会导致语法错误或者SQL注入攻击，预处理能帮你安全处理这些情况。
• 注意表中的名称一致性：比如states表中的country_name要和countries表中的country_name完全一致（包括大小写、空格），否则查询会匹配不到数据。

这样修改后，你的联动下拉框就会基于名称来关联查询了，完全适配你新的表结构！

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