如何禁用同名所有select中特定值的option选项？

初始HTML结构 #

<select id="slctDat1" name="slctDat1" class="form-select">
      <option value="1">Text1</option>
</select>

<select id="slctDat2" name="slctDat2" class="form-select">
      <option value="1">Text1</option>
</select>

需求说明 #

当任意一个上述select的选项发生变更（onchange事件触发）时，获取当前选中的值，禁用所有同组select中该值对应的option，最终效果如下：

<select id="slctDat1" name="slctDat1" class="form-select">
      <option value="1" selected disabled>Text1</option>
</select>

<select id="slctDat2" name="slctDat2" class="form-select">
      <option value="1" disabled>Text1</option>
</select>

解决方案（jQuery实现） #

// 绑定change事件到所有name以slctDat开头的select
$('select[name^="slctDat"]').on('change', function() {
    // 获取当前选中的值
    const selectedVal = $(this).val();
    
    // 重置所有option的禁用状态，避免旧状态干扰新选择
    $('select[name^="slctDat"] option').prop('disabled', false);
    
    // 收集所有已选中的有效值
    const selectedValues = $('select[name^="slctDat"]')
        .map(function() { return $(this).val(); })
        .get()
        .filter(val => val !== null);
    
    // 遍历所有option，禁用已被选中的值对应的选项
    $('select[name^="slctDat"] option').each(function() {
        if (selectedValues.includes($(this).val())) {
            $(this).prop('disabled', true);
        }
    });
    
    // 确保当前select的选中项保持选中状态
    $(this).find(`option[value="${selectedVal}"]`).prop('selected', true);
});

// 页面加载完成后触发一次change事件，处理初始选中项
$(document).ready(function() {
    $('select[name^="slctDat"]').trigger('change');
});

代码说明 #

• 使用name^="slctDat"选择器匹配所有name以slctDat开头的select，适配你实际的name命名规则
• 每次变更时先重置所有option的禁用状态，保证用户切换选项时，之前禁用的选项可以重新启用
• 收集所有已选中的值，处理多个select同时存在选中项的场景
• 遍历所有option，批量禁用对应已选中值的选项
• 页面加载时触发一次change事件，确保初始状态符合要求

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