Select2下拉展开时如何即时动态添加新选项元素

使用Select2做下拉选择时，如果需要初始加载少量选项，点击下拉项内的加号按钮在不关闭下拉面板的前提下发起Ajax请求追加新选项，直接往原生select元素append option无法触发已展开面板的内容刷新，可按以下方案实现。

核心实现逻辑 #

• 绑定加号按钮事件时阻止事件冒泡，避免触发Select2默认的选项选中、下拉关闭行为
• 追加完原生option后，调用Select2实例内置的dataAdapter方法同步最新数据，手动触发下拉面板重绘，全程保持下拉展开状态
• 放弃setTimeout延迟绑定事件的写法，通过事件委托绑定按钮点击逻辑，避免DOM渲染时序问题

完整实现代码 #

HTML 引入依赖与结构 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.6/select2-bootstrap.min.css" rel="stylesheet" />
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<select id="select-test" style="width: 300px"></select>

JS 初始化与交互逻辑 #

var formatTemplate, url = 'https://620aa88092946600171c5bf0.mockapi.io/test/v1/a';

formatTemplate = function(item) {
  if (item.id === 3) {
    return $('<span>Text: ' + item.text + ' <button class="load-more-btn">+</button></span>');
  }
  return $('<span>Text: ' + item.text + '</span>');
};

$('#select-test').select2({
  ajax: {
    url: url,
    type: 'GET',
    dataType: 'json',
    processResults: function(results) {
      return { results: results }
    },
  },
  templateResult: formatTemplate
});

$('#select-test').on('select2:open', function() {
  const $dropdown = $(this).data('select2').$dropdown;
  // 事件委托绑定按钮点击，动态渲染的按钮也能响应
  $dropdown.off('click.loadmore').on('click.loadmore', '.load-more-btn', function(e) {
    e.stopPropagation();
    e.preventDefault();

    // 此处替换为实际的Ajax拉取更多选项逻辑
    const newOptions = [
      {id: 9, text: '新增选项1'},
      {id: 10, text: '新增选项2'}
    ];

    // 批量追加原生option
    newOptions.forEach(opt => {
      $('#select-test').append(new Option(opt.text, opt.id, false, false));
    });

    // 核心步骤：同步数据并重绘下拉面板，保持展开状态
    const instance = $('#select-test').data('select2');
    instance.dataAdapter.current(function(currentData) {
      instance.trigger('results:all', {
        data: currentData,
        query: instance.lastParams
      });
    });
  });
});

常规滚动到底部分页加载的场景不需要自定义按钮，直接使用Select2自带的ajax分页配置即可实现自动懒加载，上述方案仅适用于手动点击按钮触发加载的自定义场景。

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