前言
项目中要实现多选,就想到用插件,选择了bootstrap-select。
附上官网api链接,http://silviomoreto.github.io/bootstrap-select/.
没有中文的。对付看吧。有机会每个方法实践一下,会总结的。我自己也等着呢。
需要引用的它们
?
核心选项
官网有的,期待翻译。。。
核心方法
官网有的,期待翻译。。。
实例应用
bootstrap布局后,select多选代码如下
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
< 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代码:
?
1 2 3 4 5 |
$(window).on( 'load' , function () { $( '#usertype' ).selectpicker({ 'selectedText' : 'cat' }); }); |
获取值, $("#XXX").val()即可
回显操作:
用方法 $('.selectpicker').selectpicker('val', 'Mustard');
Mustard处填入数组。代码如下:
?
1 2 3 |
var str= '3,4,5,6' ; var arr=str.split( ',' ); $( '#usertype' ).selectpicker( 'val' , arr); |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。