动态改变 bootstrap-select 数据源
- 维护一个历史项目时,需要动态改变一个下拉框的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/