BootStrap selectpicker
mark 一下使用 bootstrap selectpicker 遇到的一個(gè)小issue，作為下次查錯(cuò)使用
$('.selectpicker').selectpicker('val', 'Mustard');//單選
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);//多選$('.selectpicker').selectpicker('refresh'); 可以刷新顯示
mark一下問(wèn)題：設(shè)置的val必須為option里面的value值，如果用name怎不生效。
PS：select 美化(bootstrap)
需要引入的文件：
bootstrap-combined.min.css
bootstrap-select.css
bootstrap-select.js
以及bootstrap.min.js等幾個(gè)常用的bootstarp文件
實(shí)現(xiàn)：
1、 在<select>標(biāo)簽中添加class或者id，建議添加class，因?yàn)閏lass可以重復(fù)；
2、 在js文件中添加初始化方法：
initFnc : function(){
$(".selectpicker").selectpicker({noneSelectedText:'請(qǐng)選擇'});
}
在外部初始化的時(shí)候調(diào)用該方法就ok！
下圖是美化后的：不是很好看，但是自己覺(jué)得比之前強(qiáng)多了！
但是這種美化插件有幾個(gè)問(wèn)題：
其實(shí)算不上幾個(gè)，只是自己覺(jué)得這個(gè)問(wèn)題很棘手，在用此方法美化之后，動(dòng)態(tài)賦值的<select>將取法顯示，我覺(jué)得應(yīng)該是這樣： bootstrap-select.js中把沒(méi)有option的<select>顯示'請(qǐng)輸入'，這樣的話動(dòng)態(tài)賦值的option就寫(xiě)不進(jìn)去了！如果能把noneSelectedText:'請(qǐng)選擇' 進(jìn)行修復(fù)，那么這個(gè)問(wèn)題應(yīng)該是可以解決的！
經(jīng)過(guò)幾個(gè)小時(shí)的研究，發(fā)現(xiàn)了問(wèn)題所在，但是只是解決了其中的一個(gè)；
在js中調(diào)用的時(shí)候，一定要等也面上的select 中的option加載完成之后再調(diào)
initFnc : function(){
$(".selectpicker").selectpicker({noneSelectedText:'請(qǐng)選擇'});
}
這樣就可以把動(dòng)態(tài)的select賦值也能美化了，但是任然存在一個(gè)問(wèn)題：不是頁(yè)面上的每一個(gè)select都能在頁(yè)面初始化的時(shí)候全部加載的，比如：現(xiàn)在有兩個(gè)聯(lián)動(dòng)的select，也就是第二個(gè)select的option要隨第一個(gè)變化，在js中添加監(jiān)控onchange或者change；如果這樣美化就有問(wèn)題了！
以上所述是小編給大家介紹的BootStrap selectpicker的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
小程序?qū)崿F(xiàn)點(diǎn)擊動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)點(diǎn)擊動(dòng)畫(huà)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
15個(gè)高級(jí)前端開(kāi)發(fā)小技巧總結(jié)分享
這篇文章主要介紹了15種不依賴JavaScript的高級(jí)Web開(kāi)發(fā)技術(shù),涵蓋了從響應(yīng)式排版到圖像延遲加載的各個(gè)方面,展示了現(xiàn)代HTML和CSS的強(qiáng)大功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11
這篇文章主要介紹了JSON鍵值對(duì)序列化和反序列化知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-01-01
這ES6允許為函數(shù)參數(shù)設(shè)置默認(rèn)值，即直接寫(xiě)在參數(shù)定義后面。下面篇文章主要介紹了ES6中參數(shù)默認(rèn)值語(yǔ)法的相關(guān)資料，對(duì)大家具有一定的參考價(jià)值，需要的朋友下面來(lái)一起看看吧。2017-05-05
用表格輸出1-1000之間的數(shù)字實(shí)現(xiàn)代碼(附特效)
本文將介紹下用表格輸出1-1000之間的數(shù)字同時(shí)附有特效，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-04-04
今天Test時(shí)發(fā)現(xiàn)一個(gè)小問(wèn)題，上傳控件完成后，路徑還保留，為了清除，需要想一些辦法2013-07-07
今天硬著頭皮去搞一段混淆過(guò)的js代碼，因?yàn)樵创a丟了。。。 本來(lái)打算要在js引擎那一層去獲取代碼的，發(fā)現(xiàn)根本不需要。2009-01-01
本文主要介紹了js跨域的幾種解決方案,主要介紹了8種方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
JavaScript是一種單線程語(yǔ)言,它在任何給定時(shí)間只能執(zhí)行一個(gè)任務(wù),然而js確能夠處理異步操作,這得益于其事件循環(huán)（Event Loop）機(jī)制,今天這篇文章帶領(lǐng)大家深入理解JavaScript單線程特性,以及講解事件循環(huán)和js多線程知識(shí)2023-10-10
js實(shí)現(xiàn)的Easy Tabs選項(xiàng)卡用法實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)的Easy Tabs選項(xiàng)卡用法,以完整實(shí)例形式較為詳細(xì)的分析了JavaScript鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09