实现Bootstrap中select的重置功能

今天被一个重置bootstrap的select的需求所困扰许久,最后通过网上一位大神指点迷津,成功解决。这里把他分享给大家

》》============================================================================》

若简单地采用Reset按钮重置可能就达不到所想要的结果,因为bootstrap为了美化select,在原生态select之下又添加了一层,详见下图源码截图:

 

这就需要采用jQuery来控制select显示及真实的select值,上代码:

复制代码
1 $("button[type='reset']").click(function(){
2      $(':input').attr("value",'');
3      $("select.selectpicker").each(function(){
4         $(this).selectpicker('val',$(this).find('option:first').val());    //重置bootstrap-select显示
5         $(this).find("option").attr("selected", false);                    //重置原生select的值
6         $(this).find("option:first").attr("selected", true);
7     });
8 });
最后附上小弟的代码:
reset : function(){
		$("#busubviewName").val(""),
		$("#busubviewRootName").val(""),
	    $("#menutype-selectpicker").each(function(){
			$(this).selectpicker('val',$(this).find('option:first').val());
			$(this).find("option").attr("selected", false);   
		}),
		$("#isable-selectpicker").each(function(){
			$(this).selectpicker('val',$(this).find('option:first').val());
			$(this).find("option").attr("selected", false);   
		})
		
		
		this.requestRemoteData(v_pagePack);
	},