在 optgroup 中选择选择器添加选项答案

【问题标题】：Selectpicker add option in optgroup在 optgroup 中选择选择器添加选项
【发布时间】：2018-04-23 12:56:58
【问题描述】：

我想使用 jQuery 在optgroup 中添加一个选项。我正在使用引导选择器。以下是我的代码：

var groupOption = "<option value='123'>123</option>";
$("#selectpickerdemo").append(groupOption).selectpicker('refresh');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selectpicker" multiple name="selectpickerdemo" id="selectpickerdemo">
  <optgroup label="Label 1">
    <option value='abc'>ABC</option>
    <option value='abcd'>ABCD</option>
  </optgroup>
  <optgroup label="Label 2">
    <option value='abc'>ABC</option>
    <option value='abcd'>ABCD</option>
  </optgroup>
</select>

【问题讨论】：

您只需在调用append() 之前选择optgroup 元素，而不是像现在这样选择select。
@RoryMcCrossan，我试过了。我为每个 optgroup 提供了 id 并尝试使用该 id 添加选项，但它不起作用

标签： php jquery twitter-bootstrap bootstrap-selectpicker

【解决方案1】：

请使用id 属性（或class 等其他属性）。例如

...
<optgroup label="Label 1" id="label1">
    <option value='abc'>ABC</option>
    <option value='abcd'>ABCD</option>
</optgroup>
...

var opt_label1 = $("#label1" );
$("<option>").text('option text').val('option value').appendTo(opt_label1);

更多细节，请参考这个例子。 http://jsfiddle.net/jonathansampson/493qa/

【讨论】：

我想在特定的 optgroup 下添加。例如在标签 1 或标签 2 下
使用id或class属性，从中获取一个optgroup的jQuery对象。并使用appendTo 方法将option 添加到jQuery 对象中。
我试过了，但是bootstrap将optgroup和option转换成ul li格式
我知道，您可能正在使用引导模板。你能告诉我你的引导版本吗？
引导 v3.3.6

【解决方案2】：

像普通选择器一样根据id 或label 选择<optgroup。

相关代码：

$("#selectpickerdemo optgroup#label1").append(groupOption).selectpicker('refresh');

如果你有标签但没有ID，请按以下方式使用：

$("#selectpickerdemo optgroup[label='Label 1']").append(groupOption).selectpicker('refresh');

这是一个sn-p：

var groupOption = "<option value='123'>123</option>";
$("#selectpickerdemo optgroup#label1").append(groupOption).selectpicker('refresh');

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css">

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>


<select class="selectpicker" multiple name="selectpickerdemo" id="selectpickerdemo">
  <optgroup label="Label 1" id="label1">
    <option value='abc'>ABC</option>
    <option value='abcd'>ABCD</option>
  </optgroup>
  <optgroup label="Label 2" id="label2">
    <option value='abc'>ABC</option>
    <option value='abcd'>ABCD</option>
  </optgroup>
</select>

希望这会有所帮助。

【讨论】：