使用bootstrap-select遇到的坑-下拉框数据不显示
1、问题背景:
根据项目需要通过bootstrap-select实现下拉多选,但是
1、当使用ajax请求到数据或者模拟的数据添加到下拉框时下拉框数据不显示,
2、将引入的jquery升级到jquery3.1.1版本会出现初始化时下拉框不显示
查找原因后是得有两步refresh和render操作,缺一不可。下面结合案例及效果图给大家参考:
2、案例代码
- html代码
<div id="mfrType"></div>
- js代码
var elements=['张三','‘李四’,'小明','小红'];
selects("mfrType",elements);
//动态生成select多选下拉框
function selects(type,element){
var select =$("#"+type);
select=$('<select>',{
'class':'selectpicker show-tick form-control validate[required]',
'id':type+"id",
'name':type+"name",
'multiple':"multiple",//多选
'data-live-search':"false"//查询输入框
});
for(var o in element){
select.append($('<option>',{
'value':element[o].value
}).append(element[o].text));
}
$("#"+type).html(select);
// 缺一不可
$('#'+type+'id').selectpicker('refresh');
$('#'+type+'id').selectpicker('render');
}
参考图
- 修改前
- 修改后