Bootstrap Web前端CSS框架
Bootstrap是Twitter推出的一個開源的用於前端開發的工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範，它即是由動態CSS語言Less寫成。Bootstrap一經推出後頗受歡迎，一直是GitHub上的熱門開源專案，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該專案。
這篇文章主要介紹了BootStrap selectpicker 的相關資料,非常不錯，具有參考借鑑價值，需要的朋友可以參考下
mark 一下使用 bootstrap selectpicker 遇到的一個小issue，作為下次查錯使用
$(`.selectpicker`).selectpicker(`val`, `Mustard`);//單選
$(`.selectpicker`).selectpicker(`val`, [`Mustard`,`Relish`]);//多選$(`.selectpicker`).selectpicker(`refresh`); 可以重新整理顯示
mark一下問題：設定的val必須為option裡面的value值，如果用name怎不生效。
PS：select 美化(bootstrap)
需要引入的檔案：
bootstrap-combined.min.css
bootstrap-select.css
bootstrap-select.js
以及bootstrap.min.js等幾個常用的bootstarp檔案
實現：
1、 在<select>標籤中新增class或者id，建議新增class，因為class可以重複；
2、 在js檔案中新增初始化方法：
initFnc : function(){
$(“.selectpicker”).selectpicker({noneSelectedText:`請選擇`});
}
在外部初始化的時候呼叫該方法就ok！
下圖是美化後的：不是很好看，但是自己覺得比之前強多了！
但是這種美化外掛有幾個問題：
其實算不上幾個，只是自己覺得這個問題很棘手，在用此方法美化之後，動態賦值的<select>將取法顯示，我覺得應該是這樣： bootstrap-select.js中把沒有option的<select>顯示`請輸入`，這樣的話動態賦值的option就寫不進去了！如果能把noneSelectedText:`請選擇` 進行修復，那麼這個問題應該是可以解決的！
經過幾個小時的研究，發現了問題所在，但是隻是解決了其中的一個；
在js中呼叫的時候，一定要等也面上的select 中的option載入完成之後再調
initFnc : function(){
$(“.selectpicker”).selectpicker({noneSelectedText:`請選擇`});
}
這樣就可以把動態的select賦值也能美化了，但是任然存在一個問題：不是頁面上的每一個select都能在頁面初始化的時候全部載入的，比如：現在有兩個聯動的select，也就是第二個select的option要隨第一個變化，在js中新增監控onchange或者change；如果這樣美化就有問題了！
以上所述是小編給大家介紹的BootStrap selectpicker的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對phperz網站的支援！
轉載自：http://www.phperz.com/article…