如何在 silviomoreto 的 Bootstrap-Select 上添加选项值

Question

我使用了 silviomoreto 的 bootstrap-select 但我遇到了问题。 我有 2 个下拉列表（选择）一个区域下拉列表和城市。 现在，我有一个 jquery onchange 函数，该函数将根据所选区域更改城市下拉列表中的值。 这是我的代码：

<select id="region" class="selectpicker"></select>
<select id="cities" class="selectpicker"></select>

$("#region").on('change', function () {
   $("#cities").html('<option>city1</option><option>city2</option>');
});

问题是我认为兼容性？ 当我删除 class="selectpicker" 时，它工作正常，但我无法删除它，因为我将它用于我的下拉 ui。 我在这里检查了文档https://developer.snapappointments.com/bootstrap-select/但我找不到我的问题的相关答案。 谢谢！

Answer 1

试试selectpicker('refresh') 。

刷新（）

要使用 JavaScript 以编程方式更新选择，首先操作选择，然后使用刷新方法更新 UI 以匹配新状态。 在删除或添加选项时，或者通过 JavaScript禁用/启用选择时，这是必要的。

片段

$("#cities")
   .html('<option>city1</option><option>city2</option>')
   .selectpicker('refresh');

工作演示：http: //jsfiddle.net/codeandcloud/nr54vx7b/

Answer 2

我创建了一个示例，该示例通过从数组中获取数据来创建具有分组选项的动态下拉菜单。 我希望它有帮助

 // Example data Array list namespace_list = [ ['test1-c1', 'test2-c1', 'test3-c1', 'test4-c1', 'test5-c1', 'test6-c1'], ['test1-c2', 'test2-c2', 'test3-c2', 'test4-c2', 'test5-c2', 'test6-c2'] ] $('#pod_dropdown').selectpicker(); // Delete old options of the dropdown $('#pod_dropdown').find('option').remove(); // Selecting selectpicker dropdown select = document.getElementById('pod_dropdown'); for (let namespace of namespace_list) { // Generating group name namespace_name = namespace[0].slice(6, 8)+'-title' // Creating the optiongroup var optgroup = document.createElement('optgroup'); optgroup.id = namespace_name; optgroup.label = namespace_name // Appending optiongroup to the dropdown select.appendChild(optgroup); // Selecting the optiongroup optiongroup = document.getElementById(namespace_name); for (let pod of namespace) { // Creating the options of the optiongroup var opt = document.createElement('option'); opt.value = pod; opt.innerHTML = pod; // Appending the option to the optiongroup optiongroup.appendChild(opt); } } // Refresh the dropdwon menu $('#pod_dropdown').selectpicker("refresh"); // Getting the value after selecting it in the UI and unselect the dropdown function filterpod() { let pod = $('#pod_dropdown').val().toString(); console.log(pod) }

 <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- bootstrap --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- multi select dropdown --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script> <!-- Creatting the dropdown --> <select id="pod_dropdown" class="selectpicker" data-style="btn btn-primary btn-sm" multiple data-live-search="true" data-width="auto"></select> <!-- Calling the function filterpod when hide dropdown after select option --> <script type="text/javascript"> $('#pod_dropdown').on('hide.bs.select', function(e) {filterpod();}); </script>