如何在 jQuery whit“selectpicker”类中添加选项以选择列表？

Posted 2023-05-08

【中文标题】如何在 jQuery whit“selectpicker”类中添加选项以选择列表？

【英文标题】：How to add option to select list in jQuery whit "selectpicker" class?

【发布时间】：2021-09-24 16:45:39

【问题描述】：

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

$("#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，但也不起作用。

【参考方案1】：

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

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

【参考方案2】：

添加新选项后，只需在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

【讨论】：

感谢@Albab 和@Kinglish 我们必须使用$("#mySelect2").selectpicker('render') 而不是$("#mySelect2").selectpicker('render')