Question

我有一个引导程序Selectpicker控制器，我想用Javascript填充它，代码可以正常使用简单的选择输入，但是当我添加class="selectpicker"它不再工作

这是我的代码： HTML

<select id="hotspotList" class="selectpicker show-menu-arrow form-control">
</select>

的Javascript

var select = document.getElementById("hotspotList");
var options = ["1", "2", "3", "4", "12"];
for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}

Answer 1

使用refresh()，要以编程方式使用JavaScript更新选择，请先操作选择，然后使用刷新方法更新UI以匹配新状态。在删除或添加选项时，或通过JavaScript禁用/启用选择时，这是必需的。请参阅https://silviomoreto.github.io/bootstrap-select/

 $('.selectpicker').selectpicker('refresh');

Answer 2

<强>更新

只需启用引导程序 - 通过JavaScript选择：

$('#hotspotList').selectpicker('refresh');

Answer 3

$('.selectpicker').selectpicker('refresh'); 可以使用。

＆＃13;

function addMore(){
var select = document.getElementById("hotspotList");
var options = ["1", "2", "3", "4", "12"];
for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}
    
   
$(".selectpicker").selectpicker('refresh');
    
}


$(document).ready(function(){
$(".selectpicker").selectpicker();
})

＆＃13;

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<select class="selectpicker" id="hotspotList">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

<button onclick="addMore()"> addMore !</button>

＆＃13;

填充选择选项不适用于selectpicker类

3 个答案: