JQuery按文本选中Select Option功能异常排查

你的Apply All按钮在手动修改选项后失效，核心问题出在错误使用attr()操作select的选中状态，而非针对DOM属性的prop()。手动交互后HTML属性与DOM实际状态不同步，导致后续的选中判断和设置逻辑失效。

问题根源拆解 #

1. removeAttr('selected')仅删除HTML中的selected="selected"标记，但DOM元素的selected布尔属性并未被正确重置，状态不同步。
2. attr('selected', true)只修改HTML属性，不会同步更新DOM的选中状态——用户手动修改选项后，这种方式完全无法触发UI和状态的同步。

修复后的完整代码 #

$('#btnApplyAll').on('click', function(){
    // 获取第一个下拉框的选中文本
    const selectedSheetText = $('#select1').find(":selected").text();
    const allSheetSelects = $('select[name="sheet-select"]');
    let hasMismatch = false;

    // 先遍历检查所有文件是否都包含目标sheet
    allSheetSelects.each(function() {
        const targetOption = $(this).find('option').filter(function() {
            return $(this).text() === selectedSheetText;
        });
        
        if (targetOption.length === 0) {
            hasMismatch = true;
            return false; // 终止循环，无需继续检查
        }
    });

    if (hasMismatch) {
        notify_long("Selected sheet doesn't exists in all files!", 'danger');
    } else {
        // 逐个处理每个下拉框，确保状态同步
        allSheetSelects.each(function() {
            // 先取消当前下拉框所有选项的选中状态
            $(this).find('option').prop('selected', false);
            // 找到目标选项并设置为选中
            $(this).find('option').filter(function() {
                return $(this).text() === selectedSheetText;
            }).prop('selected', true);
            // 触发change事件，确保依赖该事件的逻辑（比如单选模式切换）能正常响应
            $(this).trigger('change');
        });
    }
});

关键优化点 #

• 替换attr()为prop()：prop()直接操作DOM元素的属性（如selected布尔值），确保选中状态与UI完全同步，无论初始化还是用户手动修改后都能稳定工作。
• 逐个处理下拉框：之前的批量设置逻辑容易出现状态不同步，现在逐个清空选中、设置目标选项，逻辑更清晰可靠。
• 添加trigger('change')：如果你的单选按钮切换逻辑依赖select的change事件，触发该事件能确保模式切换（按名称/位置）也能正常响应。

关于单选按钮失效的补充建议 #

如果切换单选按钮后选项显示异常，大概率是模式切换逻辑也存在attr/prop使用错误，或者没有正确更新select的选项列表。建议检查模式切换代码，确保同样使用prop()设置选中状态，且更新选项时同步DOM状态。

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