Select2分组数据添加/删除行失效问题求助

问题描述 #

使用带分组数据的jQuery Select2组件时，无法正常添加或删除数据行：未分组时功能正常，但分组后，添加/删除选项后下拉菜单无法重新渲染；虽然在元素检查中能看到DOM数据的变更，但下拉菜单显示异常。

问题原因 #

当初始化Select2时使用data参数传入分组格式的数组，Select2会基于该数组构建独立的内部数据结构，而非直接依赖原生DOM的<optgroup>和<option>元素。直接操作DOM修改选项后，Select2的内部数据未同步更新，仅触发change事件无法让下拉菜单重新渲染。

修正代码 #

JavaScript 代码 #

// 全局维护Select2的数据源，方便后续修改
let selectData = [{
    text: "Group1",
    children: [{
        id: "1",
        text: "Option 1"
      },
      {
        id: "2",
        text: "Option 2"
      }
    ]
  },
  {
    text: "Group2",
    children: [{
        id: "3",
        text: "Option 3"
      },
      {
        id: "4",
        text: "Option 4"
      }
    ]
  }
];

$(document).ready(function() {
  $("#selectId").select2({
    data: selectData
  });
});

function remove(id) {
  // 遍历所有分组，移除指定id的选项
  selectData.forEach(group => {
    group.children = group.children.filter(item => item.id !== id);
  });
  // 重新初始化Select2以同步数据
  $("#selectId").select2('destroy').select2({data: selectData});
}

function add(id, text, groupText) {
  // 查找目标分组，不存在则创建新分组
  let targetGroup = selectData.find(group => group.text === groupText);
  if (!targetGroup) {
    targetGroup = {
      text: groupText,
      children: []
    };
    selectData.push(targetGroup);
  }
  // 向分组中添加新选项
  targetGroup.children.push({id: id, text: text});
  // 重新初始化Select2以同步数据
  $("#selectId").select2('destroy').select2({data: selectData});
}

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select id="selectId" name="selectId" style="width:100%;"></select>

<button type="button" onclick="remove(2)">
  remove
</button>

<button type="button" onclick="add(5, '5_text', 'Group2')">
  add
</button>

说明 #

• 核心思路是维护Select2的原始数据源数组，所有添加/删除操作直接修改该数组，再通过重新初始化Select2来同步内部数据和视图。
• 避免直接操作原生DOM元素，确保Select2的内部数据与视图始终保持一致。

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