select 美化(bootstrap)


需要引入的文件:

        bootstrap-combined.min.css

        bootstrap-select.css

        bootstrap-select.js

以及bootstrap.min.js等幾個常用的bootstarp文件

 

實現:

1、    在<select>標簽中添加class或者id,建議添加class,因為class可以重復;

2、    在js文件中添加初始化方法:

 

1    initFnc : function(){
2                 $(".selectpicker").selectpicker({noneSelectedText:'請選擇'});
3          }
4  

 

 在外部初始化的時候調用該方法就ok!

 

下圖是美化后的:不是很好看,但是自己覺得比之前強多了!

 

 

但是這種美化插件有幾個問題:

    其實算不上幾個,只是自己覺得這個問題很棘手,在用此方法美化之后,動態賦值的<select>將取法顯示,我覺得應該是這樣:        bootstrap-select.js中把沒有option的<select>顯示'請輸入',這樣的話動態賦值的option就寫不進去了!如果能把noneSelectedText:'請選擇'   進行修復,那么這個問題應該是可以解決的!

 

--------------------------------------------------------------------------------------------------------------------------------------------------------------

        經過幾個小時的研究,發現了問題所在,但是只是解決了其中的一個;

        在js中調用的時候,一定要等也面上的select 中的option加載完成之后再調

1  initFnc : function(){
2     $(".selectpicker").selectpicker({noneSelectedText:'請選擇'});
3  }

這樣就可以把動態的select賦值也能美化了,但是任然存在一個問題:不是頁面上的每一個select都能在頁面初始化的時候全部加載的,比如:現在有兩個聯動的select,也就是第二個select的option要隨第一個變化,在js中添加監控onchange或者change;如果這樣美化就有問題了!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM