bootstrap-select 使用踩坑

動態改變 bootstrap-select 數據源

1. 維護一個歷史項目時，需要動態改變一個下拉框的options選項，這裏使用了bootstrap-select 這個組件，開始再嘗試了很多方法之後，都不能達到效果，這裏直接給出解決方法，希望給看到的人少走彎路。

<!-- HTML -->
<select class="form-control" id="contentTypeNode" name="contentTypeNode" multiple>
    <option value="1" data-type="ali-express"> 圖文貼 </option>
    <option value="2" data-type="ali-express"> 清單貼 </option>
</select>

....

<script type="x-template" id="social-options">
   <option value="3" data-type="social"> Ins Post </option>
   <option value="4" data-type="social"> Ins Story </option>
</script>

// JAVASCRIPT
$('#contentTypeNode')
    .html($('#social-options').text())
    .selectpicker('refresh')
    .selectpicker('render');

關鍵就是手動改變options選項之後，要記得調用組件的refresh和render方法。

最後附上這個組件的官方文檔
https://developer.snapappointments.com/bootstrap-select/