Select2需求：选中产品时移除默认「All」选项，默认以「All」为占位符

我明白你想要实现的效果——默认状态下Select2显示「All」作为选中项，当用户通过Ajax搜索选择其他产品后，「All」选项就消失，只保留用户选中的产品。咱们可以通过Select2的事件监听和选项管理来实现这个需求，下面是具体的解决方案：

核心思路 #

• 初始时将「All」设为默认选中项
• 监听Select2的select和unselect事件：当有非「All」选项被选中时，移除「All」选项；当所有其他选项都被取消选中时，重新添加「All」选项
• 优化Ajax加载逻辑，避免重复添加产品选项

修改后的HTML代码（保持原有结构即可） #

<div class="container">
  <select class="form-control am-product-selector__product-list-select" name="choices-multiple-default" id="choices-multiple-default" placeholder="All Products" multiple>
    <option value="All" selected>All</option>
  </select>
</div>

修改后的JavaScript代码 #

// 初始化选项数组，包含默认的「All」
const options = [{ id: 'All', text: 'All' }];
const $select = jQuery('#choices-multiple-default');

const select2Instance = $select.select2({
  placeholder: 'Search products',
  ajax: {
    url: url, // 替换为你的实际接口地址
    dataType: 'json',
    delay: 250,
    data: params => {
      return {
        // term: params.term // 按需添加搜索关键词参数
      };
    },
    processResults: data => {
      if (data) {
        // 过滤已存在的选项，避免重复添加产品
        const newItems = data.filter(item => !options.some(opt => opt.id === item.id));
        newItems.forEach(item => {
          options.push({ id: item.id, text: item.title });
        });
      }
      return {
        results: options
      };
    },
    cache: true
  },
  minimumInputLength: 3
});

// 监听选项选中事件
$select.on('select2:select', function(e) {
  const selectedId = e.params.data.id;
  // 选中非「All」选项时，移除「All」并更新Select2
  if (selectedId !== 'All') {
    const allOptionIndex = options.findIndex(opt => opt.id === 'All');
    if (allOptionIndex !== -1) {
      options.splice(allOptionIndex, 1);
      // 重新渲染选项并保留当前选中项
      $select.empty().select2({ data: options });
      $select.val($select.val()).trigger('change');
    }
  }
});

// 监听选项取消选中事件
$select.on('select2:unselect', function(e) {
  const selectedValues = $select.val() || [];
  // 所有选项都被取消时，重新添加「All」并设为选中
  if (selectedValues.length === 0) {
    if (!options.some(opt => opt.id === 'All')) {
      options.unshift({ id: 'All', text: 'All' });
      $select.empty().select2({ data: options });
      $select.val('All').trigger('change');
    }
  }
});

关键逻辑说明 #

• 选项数组管理：用options数组统一维护所有可选项，确保「All」只在需要时存在，避免Select2下拉列表出现冗余选项
• 选中事件处理：一旦用户选择了某个产品，立即移除「All」选项并重新渲染Select2，这样「All」就不会再出现在下拉列表中
• 取消选中事件处理：当用户取消所有选中的产品时，自动恢复「All」选项并设为默认选中，回到初始状态
• Ajax结果过滤：在processResults中过滤掉已存在的产品，避免重复添加相同选项导致的列表混乱

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