动态添加Select列表并禁用已选中选项的技术实现问询

看起来你需要实现点击按钮新增Select下拉框，同时确保所有下拉框里已经被选中过的选项被禁用，避免重复选择。我来给你一套完整的实现方案，结合你现有的代码调整优化：

完整HTML代码 #

首先调整你的HTML结构，我们保留初始的Select作为模板，同时添加容器和新增按钮：

<div class="select-group-container">
  <select class="form-control select2i" name="i_name[]" required="">
    <option value="">Select Investor</option>
    <option value="1">Self Capital</option>
    <option value="11">Mr. ABC</option>
    <option value="22">Ms. XYZ</option> <!-- 新增示例选项方便测试 -->
  </select>
</div>
<button type="button" class="add_more_items">Add More Investor</button>

JavaScript核心实现（jQuery） #

我们需要完成两个核心逻辑：新增Select时同步禁用已选选项，以及当任何一个Select的选中值变化时，实时更新所有Select的禁用状态：

$(document).ready(function() {
  // 点击按钮新增Select下拉框
  $(document).on('click','.add_more_items', function() {
    // 克隆初始的Select模板
    const newSelect = $('.select2i:first').clone();
    // 清空新Select的选中状态，默认显示占位选项
    newSelect.val('');
    // 将新Select添加到容器中
    $('.select-group-container').append(newSelect);

    // 如果使用了Select2插件，需要重新初始化新的下拉框
    // newSelect.select2();

    // 同步更新所有下拉框的禁用选项
    updateDisabledOptions();
  });

  // 监听所有Select的选中变化，实时更新禁用状态
  $(document).on('change', '.select2i', function() {
    updateDisabledOptions();
  });

  // 核心工具函数：统一处理所有Select的选项禁用逻辑
  function updateDisabledOptions() {
    // 收集所有已选中的非空选项值
    const selectedValues = $('.select2i').map(function() {
      const val = $(this).val();
      return val ? val : null;
    }).get().filter(Boolean);

    // 遍历每个Select，逐个处理选项的禁用状态
    $('.select2i').each(function() {
      const currentSelectVal = $(this).val();
      $(this).find('option').each(function() {
        const optionVal = $(this).val();
        // 规则：如果选项值已被其他Select选中，且不是当前Select自己选中的值，就禁用
        if (selectedValues.includes(optionVal) && optionVal !== currentSelectVal) {
          $(this).prop('disabled', true);
        } else {
          $(this).prop('disabled', false);
        }
      });
    });
  }
});

关键逻辑说明 #

• 模板克隆：通过$('.select2i:first').clone()复制初始下拉框，保证新增的Select和原有结构完全一致
• 已选值收集：用map()和filter()提取所有非空的选中值，避免空选项干扰判断
• 智能禁用规则：只禁用被其他Select选中的选项，保留当前Select自己选中的选项可用（方便用户修改自己的选择）
• 实时同步：无论是新增Select还是修改已有Select的选中值，都会触发状态更新，确保所有下拉框的禁用状态实时一致

额外提示 #

如果你的项目中使用了Select2插件（从classselect2i推测），记得在克隆新Select后调用newSelect.select2()重新初始化，否则会出现样式或功能异常。

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