动态添加字段中禁用已选选项的实现方案求助

嘿，我完全懂你想要实现的效果——让动态添加的下拉框里，已经被选过的选项不能在其他框里重复选对吧？你之前尝试的代码思路是对的，但可能因为没覆盖到所有场景（比如新增字段后的同步、取消选择后的恢复），或者用了attr而非更合适的prop导致没生效。下面给你一套完整的可行方案：

核心思路 #

我们需要覆盖两个关键场景：

• 每当有下拉框选择变化时，同步所有下拉框的选项禁用状态
• 新增下拉框后，立刻同步禁用状态，确保新框里不会出现已被选中的选项

完整代码实现 #

// 定义同步禁用状态的核心函数
function updateDisabledOptions() {
  // 收集所有已选中的非空值
  const selectedValues = $('select').map(function() {
    return $(this).val();
  }).get().filter(val => val !== '');

  // 遍历所有下拉选项，更新禁用状态
  $('select option').each(function() {
    const optionValue = $(this).val();
    // 判断逻辑：如果当前选项的值已被其他下拉框选中，且所在下拉框没选它，就禁用
    const shouldDisable = selectedValues.includes(optionValue) && $(this).parent().val() !== optionValue;
    $(this).prop('disabled', shouldDisable);
  });
}

$(document).ready(function() {
  // 页面加载时先初始化一次状态
  updateDisabledOptions();

  // 监听所有下拉框的change事件，实时同步状态
  $(document).on('change', 'select', function() {
    updateDisabledOptions();
  });

  // 监听新增字段的按钮（假设你的新增按钮类是.add-field，按需修改）
  $('.add-field').on('click', function() {
    // 这里放你原来的新增下拉框的代码，比如：
    // $('#dynamic-fields').append('<select><option value="">请选择</option><option value="opt1">选项1</option>...</select>');
    
    // 新增完成后立即同步禁用状态
    updateDisabledOptions();
  });
});

关键细节说明 #

1. 用prop替代attr：jQuery中处理disabled这类布尔属性时，prop()比attr()更可靠，它能正确处理状态切换（比如取消选择后重新启用对应选项）。
2. 覆盖所有交互场景：不管是修改已有下拉框的选择、新增下拉框，还是取消选择内容，都会自动同步所有选项的禁用状态。
3. 排除空值干扰：过滤掉未选择的空值，避免把默认的空白选项误禁用。

你可以把这段代码整合到你的项目里，根据自己的实际DOM结构调整选择器（比如新增按钮的类名、下拉框的容器等），就能实现你想要的功能啦！

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