如何用jQuery选择下拉框选项类/值并实现div显隐（兼容Chrome）

没错，Chrome（还有不少现代浏览器）都不会触发<option>元素的click事件，这是浏览器的内置行为限制，所以你之前的写法在Chrome里跑不起来很正常。

最靠谱的兼容方案是监听<select>本身的change事件——当用户选中下拉框里的选项时，下拉框的change事件一定会触发，而且这个事件在所有主流浏览器里都能稳定工作。我们只需要在事件回调里判断当前选中的是哪个选项，再执行对应的显示/隐藏逻辑就行。

下面是适配后的完整代码：

你的HTML代码无需改动 #

<select id="dd1" style="width: 12%"> 
    <option class="all" value="all">Select below 1</option> 
    <option id="opt1" class="opt1" value="opt1">option 1</option> 
    <option class="opt2" value="opt2">option 2</option> 
    <option class="opt3" value="opt3">option 3</option> 
    <option class="opt4" value="opt4">option 4</option> 
</select> 
<select id="dd2" style="width: 12%"> 
    <option value="all">Select below 1</option> 
    <option class="opt5" value="opt5">option 5</option> 
    <option class="opt6" value="opt6">option 6</option> 
    <option class="opt7" value="opt7">option 7</option> 
    <option class="opt8" value="opt8">option 8</option> 
</select>

修改后的jQuery代码 #

$(document).ready(function () {
    // 监听第一个下拉框的change事件
    $('#dd1').on('change', function() {
        const selectedOpt = $(this).find('option:selected');
        
        // 选中opt1时的逻辑
        if (selectedOpt.hasClass('opt1')) {
            // 显示指定modal，隐藏modal22
            $('.modal1, .modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9, .modal10, .modal11, .modal12, .modal13, .modal14, .modal15, .modal16, .modal17, .modal18, .modal19, .modal20, .modal21, .modal23, .modal24, .modal25, .modal26').show();
            $('.modal22').hide();
            // 移除dd2中value为'2'的选项（注意：你的dd2里没有这个value，可能是笔误）
            $("#dd2 option[value='2']").remove();
        }
        // 选中带有fids1类的选项时的逻辑（假设这个选项在dd1中）
        else if (selectedOpt.hasClass('fids1')) {
            $('.modal22').show();
            $('.modal1, .modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9, .modal10, .modal11, .modal12, .modal13, .modal14, .modal15, .modal16, .modal17, .modal18, .modal19, .modal20, .modal21, .modal23, .modal24, .modal25, .modal26').hide();
            $("#dd2 option[value='2']").remove();
        }
        // 可选：默认选中"Select below 1"时的重置逻辑
        else if (selectedOpt.val() === 'all') {
            // 比如隐藏所有modal，或者恢复初始状态，根据你的需求添加
        }
    });

    // 如果第二个下拉框也需要类似逻辑，同样监听它的change事件
    $('#dd2').on('change', function() {
        const selectedOpt = $(this).find('option:selected');
        // 这里添加dd2的对应逻辑，比如选中opt5时的操作
    });
});

几个关键提醒 #

• 为什么用change事件？：因为<option>的click事件在Chrome、Edge等浏览器中被禁用了，而select的change事件是标准事件，所有浏览器都支持，稳定性拉满。
• 关于选中项的判断：可以用hasClass()匹配类名，也可以用val()匹配value值，按需选择就行。
• 注意笔误：你原来的代码里$("#dd2 option[value='2']").remove();，但你的dd2选项value都是opt5到opt8，这里大概率是输入错误，记得改成实际要移除的选项value。
• 可维护性优化：如果modal数量多，你可以给需要批量显示/隐藏的modal加个统一的类，比如modal-group-1，这样就不用写一大串选择器了，比如$('.modal-group-1').show()，代码会简洁很多。

这种方案完全兼容Chrome，逻辑也更清晰，后续要加新选项的话，直接在change事件的判断分支里加条件就行。

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