Ajax多级联动下拉框求助：需实现三级下拉同时依赖双上级

嘿，我看了你的代码，发现几个核心问题导致Dd3（城市下拉框）没法同时依赖Dd1（国家）和Dd2（州/省）：

• 事件绑定的选择器写法错误：$('#country', '#state') 这种写法是在#state元素内部查找#country，而不是同时监听两个下拉框的change事件
• 条件判断逻辑失效：if(countryID, stateID)用了逗号运算符，实际只会校验stateID是否有效，完全忽略了countryID的状态
• 参数传递不完整：你大概率没把两个依赖参数都传给后端接口

下面是修正后的完整代码，我标了关键修改的地方：

$(document).ready(function(){
    // *修正选择器*：用逗号分隔，同时监听country和state的change事件
    $('#country, #state').on('change',function(){ 
        var countryID = $('#country').val();
        var stateID = $('#state').val();
        var cityDropdown = $('#city'); // 缓存DOM元素，减少重复查找

        // *修正条件判断*：确保国家和州/省都已选择
        if(countryID && stateID){ 
            $.ajax({
                type:'POST',
                url:'search_city.php',
                // *完整传递参数*：把两个依赖ID都传给后端
                data: {
                    country_id: countryID,
                    state_id: stateID
                },
                success:function(response){
                    // 先清空旧选项，再插入新的城市列表
                    cityDropdown.empty();
                    cityDropdown.html(response);
                },
                error:function(){
                    // 请求失败时重置下拉框
                    cityDropdown.empty();
                    cityDropdown.append('<option value="">加载失败，请重试</option>');
                }
            });
        } else {
            // 如果任一选项未选择，清空城市下拉框并提示
            cityDropdown.empty();
            cityDropdown.append('<option value="">请先选择国家和州/省</option>');
        }
    });
});

另外，你的后端search_city.php需要做对应的调整：

• 接收country_id和state_id两个POST参数
• 根据这两个参数查询对应的城市数据
• 返回格式化的<option>标签（比如<option value="123">北京</option>这种格式）

最后给你两个小建议：

• 给国家、州/省下拉框都加上默认的空选项（<option value="">请选择</option>），这样初始状态下能正确触发清空城市下拉框的逻辑
• 可以在AJAX请求发送时给城市下拉框加个“加载中...”的选项，提升用户体验

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