jQuery bootstrap框架下重置下拉框选择

 

前端页面中下拉选择框采用bootstrap-select美化，如下图：

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

 

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

$("button[type='reset']").click(function(){
     $(':input').attr("value",'');
     $("select.selectpicker").each(function(){
        $(this).selectpicker('val',$(this).find('option:first').val());    //重置bootstrap-select显示
        $(this).find("option").attr("selected", false);                    //重置原生select的值
        $(this).find("option:first").attr("selected", true);
    });
});