填充選擇選項與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>