使用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);
// 缺一不可
//要以编程方式更新JavaScript的选择,首先操作选择,然后使用refresh方法更新UI以匹配新状态。 在删除或添加选项时,或通过JavaScript禁用/启用选择时,这是必需的。
$('#'+type+'id').selectpicker('refresh');
//render方法强制重新渲染引导程序 - 选择ui,如果当您编程时更改任何相关值而影响元素布局,这将非常有用。
$('#'+type+'id').selectpicker('render');
}
参考图
- 修改前
- 修改后