前言
項(xiàng)目中要實(shí)現(xiàn)多選,就想到用插件,選擇了bootstrap-select。
附上官網(wǎng)api鏈接,http://silviomoreto.github.io/bootstrap-select/.
沒有中文的。對付看吧。有機(jī)會每個方法實(shí)踐一下,會總結(jié)的。我自己也等著呢。
需要引用的它們
<!-- Latest compiled and minified CSS --><link rel="stylesheet" ><!-- Latest compiled and minified JavaScript --><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script><!-- (Optional) Latest compiled and minified JavaScript translation files --><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>
核心選項(xiàng)
官網(wǎng)有的,期待翻譯。。。
核心方法
官網(wǎng)有的,期待翻譯。。。
實(shí)例應(yīng)用
bootstrap布局后,select多選代碼如下
<div class="form-group"> <label class="col-sm-3 control-label">客資類型:</label> <div class="col-sm-4"> <select id="usertype" name="usertype" class="selectpicker show-tick form-control" multiple data-live-search="false"> <option value="0">蘋果</option> <option value="1">菠蘿</option> <option value="2">香蕉</option> <option value="3">火龍果</option> <option value="4">梨子</option> <option value="5">草莓</option> <option value="6">哈密瓜</option> <option value="7">椰子</option> <option value="8">獼猴桃</option> <option value="9">桃子</option> </select> </div> </div>
js代碼:
$(window).on('load', function () { $('#usertype').selectpicker({ 'selectedText': 'cat' });});頁面效果:

選擇后的效果如下:

獲取值, $("#XXX").val()即可
回顯操作:
用方法 $('.selectpicker').selectpicker('val', 'Mustard');
Mustard處填入數(shù)組。代碼如下:
var str='3,4,5,6';var arr=str.split(',');$('#usertype').selectpicker('val', arr);以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答