三级依赖select下拉框仅两级正常，请求排查Ajax/PHP代码问题

核心错误点 #

1. jQuery选择器缺失标识符
   在#municipio的change事件处理逻辑中，else分支里的选择器$('localidad')漏掉了ID选择符#，导致无法正确定位第三级下拉框，这是第三级无响应的直接原因之一。

2. AJAX返回的提示文本错误（体验问题）
   ajaxData.php中返回市级（Municipio）选项时，默认选项文本写的是Seleccione Departamento，应该改为Seleccione Municipio，避免用户混淆。

3. SQL注入高危风险
   直接将POST参数拼接进SQL语句，极易引发SQL注入攻击，必须使用预处理语句修复。

修正后的代码 #

1. ajaxData.php（修复SQL注入与提示文本）

<?php 
include_once 'dbConfig.php'; 

if(!empty($_POST["departamento_id"])){ 
    // 使用预处理语句避免SQL注入
    $query = "SELECT * FROM municipios WHERE departamento_id = ?"; 
    $stmt = $db->prepare($query);
    $stmt->bind_param("i", $_POST['departamento_id']);
    $stmt->execute();
    $result = $stmt->get_result();
     
    if($result->num_rows > 0){ 
        echo '<option value="">Seleccione Municipio</option>'; // 修正提示文本
        while($row = $result->fetch_assoc()){  
            echo '<option value="'.$row['municipio_id'].'">'.$row['municipio'].'</option>'; 
        } 
    }else{ 
        echo '<option value="">Departamento no disponible</option>'; 
    } 
    $stmt->close();
}elseif(!empty($_POST["municipio_id"])){ 
    // 使用预处理语句避免SQL注入
    $query = "SELECT * FROM localidades WHERE municipio_id = ?"; 
    $stmt = $db->prepare($query);
    $stmt->bind_param("i", $_POST['municipio_id']);
    $stmt->execute();
    $result = $stmt->get_result();
    
    if($result->num_rows > 0){ 
        echo '<option value="">Seleccione Localidad</option>'; 
        while($row = $result->fetch_assoc()){  
            echo '<option value="'.$row['id_localidad'].'">'.$row['nombre_localidad'].'</option>'; 
        } 
    }else{ 
        echo '<option value="">Localidad no disponible</option>'; 
    } 
    $stmt->close();
} 
?>

2. 前端JS部分（修复选择器错误）

$(document).ready(function(){
    $('#departamento').on('change', function(){
        var departamentoID = $(this).val();
        if(departamentoID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'departamento_id='+departamentoID,
                success:function(html){
                    $('#municipio').html(html);
                    $('#localidad').html('<option value="">Seleccione Municipio primero</option>'); 
                }
            }); 
        }else{
            $('#municipio').html('<option value="">Seleccione Departamento primero</option>');
            $('#localidad').html('<option value="">Seleccione Municipio primero</option>'); 
        }
    });
    
    $('#municipio').on('change', function(){
        var municipioID = $(this).val(); // 变量名修正为municipioID更贴合语义
        if(municipioID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'municipio_id='+municipioID,
                success:function(html){
                    $('#localidad').html(html);
                }
            }); 
        }else{
            $('#localidad').html('<option value="">Seleccione Municipio primero</option>'); // 修复选择器，添加#
        }
    });
});

额外调试步骤 #

如果修复后仍有问题，按以下步骤排查：

• 打开浏览器开发者工具（F12），切换到网络面板，选择XHR类型，查看选择Municipio时是否发送了AJAX请求，检查请求参数municipio_id是否正确，响应内容是否有标签。
• 验证数据库中localidades表是否存在对应municipio_id的数据，确认字段名（如municipio_id、id_localidad、nombre_localidad）与代码中的一致。
• 检查dbConfig.php中的数据库连接是否正常，可在ajaxData.php开头添加error_reporting(E_ALL); ini_set('display_errors', 1);临时查看错误。

内容的提问来源于stack exchange，提问作者María R