Bootstrap selectpicker - 如何动态添加 optgroup

Posted 2023-03-16

【中文标题】Bootstrap selectpicker - 如何动态添加 optgroup

【英文标题】：Bootstrap selectpicker - how to add opt group dinamically

【发布时间】：2021-12-20 15:58:07

【问题描述】：

我有一个数组，我需要创建一个带有外群的选择器。

我尝试在这段代码中使用 jQuery：

$.each(array, function(subindex, value) 
   if (subindex == 0)
    $('#select_template').append('<optgroup label="Camping">');
   

$('#select_template').append(
                                           $('<option />')
                                          .text('Frontpage')
                                          .val(j)
                                          .attr('coll_index', index)
                                          .attr('page_index', subindex)
                                          .attr('style', 'font-style: italic;')
                                          .attr('custom_page', 'true')
                                         
                                      ); c++;

if (subindex == value.length - 1)
    $('#select_template').append('</optgroup>');
   

);

但我得到的是：

<select>
<optgroup label="Camping"></optgroup>
<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>
</select>

如何使用 jQuery 动态打开和关闭 optgroup？

【问题讨论】：

你能展示你的json结构吗？

【参考方案1】：

尝试在 $.each 循环之外创建 optgroup，例如 $('#select_template').append('<optgroup label="Camping"></optgroup>');。

要附加到选项，只需在附加中引用 optgroup。例如：$('#select_template optgroup').append()

例如：

  $('#select_template').append('<optgroup label="Camping"></optgroup>');

  $.each(array, function(subindex, value) 
    $('#select_template optgroup').append(
      $('<option />')
      .text('Frontpage')
      .val(j)
      .attr('coll_index', index)
      .attr('page_index', subindex)
      .attr('style', 'font-style: italic;')
      .attr('custom_page', 'true'));
  )

如果您需要添加多个 optgroup，则需要提供 array 的数据

这是一个基本示例：https://jsfiddle.net/r2xpt3k6/