填充选择选项与selectpicker类不起作用

Question

我有一个Bootstrap Selectpicker controle，我想用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');会工作。

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(); 
 
})

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

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