如何实现仅在多个下拉菜单均选值后显示Done按钮

我看到你的问题了，当前的jQuery代码有两个关键问题导致功能失效，咱们一步步修复它，同时保留你现有的HTML结构：

问题分析 #

1. 选择器语法错误：你写的# response-col里多了一个空格，这会导致jQuery找不到这个元素，正确的选择器应该是#response-col
2. 逻辑判断缺失：原代码只要任意一个下拉菜单变化就显示按钮，没有检查是否三个下拉都已经选中了有效选项

修复后的jQuery代码 #

把你现有的JS代码替换成下面这段，就能实现你要的功能：

// 为三个下拉菜单绑定change事件监听
$('#response-quant, #response-shape, #response-col').change(function() {
    // 检查每个下拉是否都选中了非默认的有效选项
    const hasQuant = $('#response-quant').val() !== undefined;
    const hasShape = $('#response-shape').val() !== undefined;
    const hasCol = $('#response-col').val() !== undefined;

    // 只有三个下拉都选中时才显示Done按钮，否则保持隐藏
    if (hasQuant && hasShape && hasCol) {
        $('#done').removeClass('nodisplay');
    } else {
        // 可选：如果用户后续取消选择（虽然你的默认选项是disabled，但保留这个逻辑更严谨）
        $('#done').addClass('nodisplay');
    }
});

代码说明 #

• 首先修正了第三个下拉菜单的选择器，确保能正确选中元素
• 每次下拉菜单变化时，分别判断每个下拉的val()是否存在：因为你设置的默认选项是<option disabled selected></option>，没有设置value，所以选中它时val()会返回undefined，而选中其他有效选项时会返回对应的value值
• 只有当三个下拉都选中了有效选项时，才移除nodisplay类显示按钮；如果有任何一个下拉未选中有效选项，就重新添加nodisplay类隐藏按钮（这个逻辑能覆盖用户中途修改选择的场景）

另外提个小细节：你的Done按钮写的是onchange="doneChange"，按钮一般用onclick事件，而且如果doneChange是函数的话，应该写成onclick="doneChange()"，不过这个不影响当前显示按钮的功能，你可以根据实际需求调整。

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