Выбор выбора добавить опцию в optgroup

Я хочу добавить опцию в optgroup используя jQuery. Я использую селектор выбора начальной загрузки. Вот мой код:

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>

2

Решение

Пожалуйста, используйте 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/

1

Другие решения

Выберите <optgroup основанный на id или же label как обычный селектор.

Соответствующий код:

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

Если у вас есть ярлык и нет идентификатора, используйте его следующим образом:

$("#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>

Надеюсь это поможет.

0