如何向Select2容器追加多个选项？现有代码如何适配append语法？

要实现添加新选项到Select2下拉菜单并选中它，你需要先把选项添加到原生的<select> DOM元素中（因为Select2是基于原生select工作的），再通过你的代码设置选中状态并触发Select2的变更事件。具体代码如下：

var myOption = 'Carbon';
// 先检查该选项是否已存在，避免重复添加
if (!$(TabTagBox).find(`option[value="${myOption}"]`).length) {
  // 向原生select容器append新的option标签
  $(TabTagBox).append(`<option value="${myOption}">${myOption}</option>`);
}
// 设置选中并触发Select2的change事件，让组件更新UI
$(TabTagBox).val(myOption).trigger('change.select2');

关键说明： #

• 直接调用val().trigger()只能选中已存在的选项，所以必须先通过append()把新选项注入到原生select的DOM结构里，Select2才能识别到这个选项。
• 加入存在性检查是为了避免重复添加相同的选项，如果你确定不会重复，也可以去掉这一步。
• 如果你的Select2是通过AJAX加载远程数据的，这种静态添加的方式不适用，需要修改数据源配置，但从你的描述来看，当前是静态选项场景，上面的代码完全适用。

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