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/