bootstrap js动态给select添加option元素 不展示

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ypp91zr/article/details/82790518

下午在使用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');