Question

我想使用jQuery在optgroup中添加一个选项。我正在使用bootstrap selectpicker。以下是我的代码：

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>

Answer 1

请使用id属性（或其他类似class等）。 e.g。

...
<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/

Answer 2

选择<optgroup基于id或label，就像普通选择器一样。

相关代码：

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

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

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

这是一个片段：

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>

希望这有帮助。

optgroup中的Selectpicker add选项

2 个答案: