實現Bootstrap中select的重置功能
阿新 • • 發佈:2019-01-22
今天被一個重置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); },