快捷導(dǎo)航

BootStrap selectpicker

更新時(shí)間：2016年06月20日 14:07:05 作者：gised

這篇文章主要介紹了BootStrap selectpicker 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

mark 一下使用 bootstrap selectpicker 遇到的一個(gè)小issue，作為下次查錯(cuò)使用

$('.selectpicker').selectpicker('val', 'Mustard');//單選
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);//多選$('.selectpicker').selectpicker('refresh'); 可以刷新顯示

mark一下問題：設(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！

下圖是美化后的：不是很好看，但是自己覺得比之前強(qiáng)多了！

但是這種美化插件有幾個(gè)問題：

其實(shí)算不上幾個(gè)，只是自己覺得這個(gè)問題很棘手，在用此方法美化之后，動(dòng)態(tài)賦值的<select>將取法顯示，我覺得應(yīng)該是這樣： bootstrap-select.js中把沒有option的<select>顯示'請(qǐng)輸入'，這樣的話動(dòng)態(tài)賦值的option就寫不進(jìn)去了！如果能把noneSelectedText:'請(qǐng)選擇' 進(jìn)行修復(fù)，那么這個(gè)問題應(yīng)該是可以解決的！

經(jīng)過(guò)幾個(gè)小時(shí)的研究，發(fā)現(xiàn)了問題所在，但是只是解決了其中的一個(gè)；

在js中調(diào)用的時(shí)候，一定要等也面上的select 中的option加載完成之后再調(diào)

initFnc : function(){
$(".selectpicker").selectpicker({noneSelectedText:'請(qǐng)選擇'});
}

這樣就可以把動(dòng)態(tài)的select賦值也能美化了，但是任然存在一個(gè)問題：不是頁(yè)面上的每一個(gè)select都能在頁(yè)面初始化的時(shí)候全部加載的，比如：現(xiàn)在有兩個(gè)聯(lián)動(dòng)的select，也就是第二個(gè)select的option要隨第一個(gè)變化，在js中添加監(jiān)控onchange或者change；如果這樣美化就有問題了！

以上所述是小編給大家介紹的BootStrap selectpicker的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: