Bootstrap selectpicker如何通过jQuery动态添加optgroup？

问题根因 #

jQuery的append()方法执行时会直接将传入的HTML片段解析为完整DOM节点，你单独传入<optgroup label="Camping">这个未闭合的标签时，浏览器会自动补全</optgroup>闭合标签，后续追加的option自然就被放在了optgroup外部，导致结构不符合预期。

正确实现方案 #

正确的逻辑是先完成optgroup的内部元素组装，再将完整的optgroup节点追加到select中，避免分步拼接标签导致的自动闭合问题：

// 1. 先实例化optgroup节点
const $campingGroup = $('<optgroup />', {
  label: 'Camping'
});

// 2. 遍历数组，将所有option追加到optgroup内部
$.each(array, function(subindex, value) {
  const $option = $('<option />')
    .text('Frontpage') // 可根据业务需求替换为动态文本
    .val(j) // 注意提前定义j变量，确保作用域正确
    .attr('coll_index', index) // 注意提前定义index变量，确保作用域正确
    .attr('page_index', subindex)
    .attr('style', 'font-style: italic;')
    .attr('custom_page', 'true');
  
  $campingGroup.append($option);
  c++;
});

// 3. 将组装完成的optgroup整体追加到select中
$('#select_template').append($campingGroup);

多分组拓展 #

如果需要生成多个optgroup，只需在外层加一层分组遍历，每个分组对应生成一个optgroup实例，组装完成后依次追加到select即可。

最终生成的DOM结构为预期格式：

<select id="select_template">
  <optgroup label="Camping">
    <option value="0" coll_index="0" page_index="0" style="font-style: italic;" custom_page="true">Frontpage</option>
    <option value="1" coll_index="0" page_index="1" custom_page="false">Page 1</option>
    <option value="2" coll_index="0" page_index="2" custom_page="false">Page 2</option>
  </optgroup>
</select>

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