jQuery实现Dropdown下拉选择联动显示对应div的故障求助

DevOps 小满

2026-10-3

问题排查与修复方案

问题原因

重复绑定change事件：你给同一个#building-type下拉框绑定了两个change事件触发函数，当下拉框值变化时两个函数会按顺序先后执行，第二个函数的显示隐藏逻辑会直接覆盖第一个的执行结果，所以不管选什么，最后都是第二个函数的执行效果：只显示commercial-options
缺失if判断逻辑：两段事件处理函数里的选中判断语句都没有加if关键字，单独写($('#residential').is(':checked'))只是一句没有执行效果的表达式，后面的显示隐藏代码不受判断控制，不管选中值是什么都会执行
option选中状态判断不规范：select下的option选中状态应该用:selected伪类判断，:checked是用于单选框、复选框的伪类，虽然部分浏览器兼容，但不属于标准用法

修复后的代码

简化版逻辑（仅绑定一次事件，后续拓展新类型更方便）

// 先默认隐藏所有选项区域
$('.residential-options, .commercial-options, .corporate-options, .hybrid-options').hide();

// 仅绑定一次change事件
$("#building-type").change(function() {
    // 获取当前选中的value值
    const selectedType = $(this).val();
    // 先隐藏所有选项区域
    $('.residential-options, .commercial-options, .corporate-options, .hybrid-options').hide();
    // 根据选中值显示对应区域
    if(selectedType === 'residential') {
        $('.residential-options').show();
    } else if(selectedType === 'commercial') {
        $('.commercial-options').show();
    } else if(selectedType === 'corporate') {
        $('.corporate-options').show();
    } else if(selectedType === 'hybrid') {
        $('.hybrid-options').show();
    }
});

// 初始化触发一次，适配页面初始状态
$("#building-type").trigger("change");