如何用jQuery实现下拉框联动：启用二级下拉并禁用一级已选值

核心逻辑 #

1. 初始状态禁用第二个下拉框，仅当第一个下拉框选中有效值后才启用
2. 根据第一个下拉框的选中值，动态控制第二个下拉框内选项的禁用状态
3. 实时校验两个下拉框的选中值，确保不重复

优化后的HTML（建议添加空默认选项，提升用户体验） #

<select class="form-control" id="select2">
   <option value="">请选择</option>
   <option value="1556456">Shiva</option>
   <option value="34234">Disha</option>
</select>

<select class="form-control" id="select3">
    <option value="">请选择</option>
    <option value="1556456">Shiva</option>
    <option value="34234">Disha</option>
</select>

jQuery实现代码 #

$(document).ready(function() {
    // 初始化：禁用第二个下拉框
    $('#select3').prop('disabled', true);

    // 监听第一个下拉框的选择变化
    $('#select2').on('change', function() {
        const selectedVal = $(this).val();
        const $secondSelect = $('#select3');

        if (selectedVal) {
            // 启用第二个下拉框
            $secondSelect.prop('disabled', false);
            
            // 重置第二个下拉框的所有选项为可用状态
            $secondSelect.find('option').prop('disabled', false);
            
            // 若第一个选中Shiva，禁用第二个下拉框中的Shiva选项
            if (selectedVal === '1556456') {
                $secondSelect.find('option[value="1556456"]').prop('disabled', true);
            }

            // 检查第二个下拉框当前选中值是否与第一个重复，重复则清空
            if ($secondSelect.val() === selectedVal) {
                $secondSelect.val('');
            }
        } else {
            // 第一个下拉框未选中时，禁用第二个并清空选中值
            $secondSelect.prop('disabled', true).val('');
        }
    });

    // 监听第二个下拉框的选择，防止重复选择
    $('#select3').on('change', function() {
        const secondVal = $(this).val();
        const firstVal = $('#select2').val();

        if (secondVal === firstVal) {
            alert('两个下拉框不能选择相同的值');
            $(this).val('');
        }
    });

    // 页面加载时触发一次第一个下拉框的change事件，处理初始选中状态
    $('#select2').trigger('change');
});

代码说明 #

• 初始化处理：页面加载时直接禁用第二个下拉框，强制用户先操作第一个下拉框。
• 第一个下拉框逻辑：
  • 选中有效值后立即启用第二个下拉框。
  • 每次变化都重置第二个下拉框的选项状态，避免之前的禁用设置残留。
  • 针对Shiva的特殊规则，自动禁用第二个下拉框中的对应选项。
  • 自动清空第二个下拉框中与第一个重复的选中值，提前规避冲突。
• 第二个下拉框校验：用户选择时实时检查是否与第一个重复，若重复则提示并清空选中值。
• 初始状态兼容：触发一次change事件，适配第一个下拉框默认有选中值的场景（比如你提供的原始HTML默认选中Shiva的情况）。

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