Выбор выбора добавить опцию в 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>
Решение
Пожалуйста, используйте 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 основанный на 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>Надеюсь это поможет.