BootStrap-select插件動態添加option無法顯示

問題描述：　

　　　在使用bootstrap-select插件時出現下拉框無法顯示動態追加的option，經過查看element元素發現，select標簽已經append進去了所需的option選項，但是頁面就是無法顯示，經過源碼分析發現，bootstrap在對select初始化渲染后，會在ul標簽中追加li標簽屬性,而此時無法顯示動態追加的option便是因為此li標簽中沒有值。因為在動態對select進行動態后沒有進行重新進行渲染，導致ul標簽下的li沒有將append的option渲染進去，至此不能正常顯示。

源碼分析：

<div class="form-group">
        <label class="control-label">下拉框:</label>
        <select class="selectpicker form-control" id="selector" name="selector">
              <option></option>
        </select>
</div>





$.ajax({
    url:'######',
    type:'POST',
    success:function (data) {

        $.each(data, function (index, item) {
            $("#selector").append("<option value='"+data[index].id+"'>"+data[index].name+"</option>");
        });
     

        //使用refresh方法更新UI以匹配新狀態。
        $('#selector').selectpicker('refresh');
        //render方法強制重新渲染引導程序 - 選擇ui。
        $('#selector').selectpicker('render');
    
    }

});

　　

解決辦法：

   注意js中最后兩行，缺一不可；

 //使用refresh方法更新UI以匹配新狀態。
 $('#selector').selectpicker('refresh');
 //render方法強制重新渲染引導程序 - 選擇ui。
 $('#selector').selectpicker('render');

refresh對select進行最新狀態個更新后，在使用render方法對ul標簽進行重新渲染，由此動態append的option值也會追加到ul標簽中。