下午在使用bootstrap给select添加option元素时,时用js动态生成的,发现怎么都生成不了,于是F12查看 select里面是添加起了,实际展示的不是用的这个select 而是下面那个div里面的内容。这个时候就需要强制刷新元素渲染页面了
代码例子:
function edit(ele){
$("#parent").append("<option value=''></option>");
var id=$(ele).attr("data-id");
$.ajax({
type: 'POST',
dataType : "json",
contentType:"application/json",
async:false,
url: "/pinyu/menu/list/",
data: {},
error: function () {
layMsg("数据获取异常,请联系管理员!");
},
success:function(data){
var options="";
for(var i=0;i<data.length;i++){
var d=data[i];
if(d.id!=id){
options+="<option value='"+d.id+"'>"+d.name+"</option>";
}else{
$("#level").val(d.level);
$("#name").val(d.name);
$("#sort").val(d.sort);
$("#url").val(d.url);
$("#parent").val(d.parentId);
$("#id").val(d.id);
}
}
$("#parent").append(options);
//要以编程方式更新JavaScript的选择,首先操作选择,然后使用refresh方法更新UI以匹配新状态。 在删除或添加选项时,或通过JavaScript禁用/启用选择时,这是必需的。
$('#parent').selectpicker('refresh');
//render方法强制重新渲染引导程序 - 选择ui,如果当您编程时更改任何相关值而影响元素布局,这将非常有用。
$('#parent').selectpicker('render');
}
})
}
最主要是最后面2行,缺一不可:
//要以编程方式更新JavaScript的选择,首先操作选择,然后使用refresh方法更新UI以匹配新状态。 在删除或添加选项时,或通过JavaScript禁用/启用选择时,这是必需的。
$('#parent').selectpicker('refresh');
//render方法强制重新渲染引导程序 - 选择ui,如果当您编程时更改任何相关值而影响元素布局,这将非常有用。
$('#parent').selectpicker('render');