如何使用 "selectpicker" class 将选项添加到 jQuery 中的 select 列表？

Question

我有 2 个 select 列表，我想向 jQuery 中的两个 select 列表添加选项。我在 jQuery 中添加了带有波纹管代码的选项，但这只适用于 list1 而不适用于带有 id=mySelect2 的 list2，因为 list2 有 class.

$("#mySelect1").append(new Option("option text", "value"));
$("#mySelect2").append(new Option("option text", "value"));

我的 Jsfiddle 是 here。

列表 1:

<select id='mySelect1'     >
<option value="4444">4444</option>
<option value="Elite1">Elite1</option>
<option value="Elite">Elite</option>
</select>

列表 2:

<select id='mySelect2'   data-live-search="true" data-live-search-style="startsWith" class="selectpicker"  >

<option value="4444">4444</option>
<option value="Elite1">Elite1</option>
<option value="Elite">Elite</option>

</select>

如何向 list2 添加选项？

我用这个 link 但没用。

Answer 1

添加新选项后，只需在 selectpicker 元素上调用 render 方法

$("#mySelect1").append(new Option("option text", "value"));
$("#mySelect2").append(new Option("option text", "value"));
$("#mySelect2").selectpicker('render')

https://developer.snapappointments.com/bootstrap-select/methods/#selectpickerrender

Answer 2

您可以使用刷新方法来添加（甚至删除）选项。你可以这样做：

$(function () {
    $('#mySelect2').selectpicker();
});

$('#addButton').click(function(){
    let valuetoadd = prompt('What to add?');
  $('#mySelect2,#mySelect1').append(`<option value="${valuetoadd}">${valuetoadd}</option>`);
  $('#mySelect2').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.12.1/css/bootstrap-select.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>

 
    


<select id='mySelect1'     >
<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>
</select>

<hr>


<select id='mySelect2'   data-live-search="true" data-live-search-style="startsWith"  >

<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>

</select>

<button id="addButton">
Add New Value
</button>

如何使用 "selectpicker" class 将选项添加到 jQuery 中的 select 列表？

How to add option to select list in jQuery whit "selectpicker" class?

javascript

html

jquery

bootstrap-selectpicker