Bootstrap select多选下拉框实现代码

前言

项目中要实现多选,就想到用插件,选择了bootstrap-select。

附上官网api链接,http://silviomoreto.github.io/bootstrap-select/.

没有中文的。对付看吧。有机会每个方法实践一下,会总结的。我自己也等着呢。

需要引用的它们

?

1

2

3

4

5

6

7

8

<!-- Latest compiled and minified CSS -->

<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->

<scriptsrc="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 -->

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>

核心选项

官网有的,期待翻译。。。

核心方法

官网有的,期待翻译。。。

实例应用

bootstrap布局后,select多选代码如下

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<divclass="form-group">

<labelclass="col-sm-3 control-label">客资类型:</label>

<divclass="col-sm-4">

<selectid="usertype"name="usertype"class="selectpicker show-tick form-control"multipledata-live-search="false">

<optionvalue="0">苹果</option>

<optionvalue="1">菠萝</option>

<optionvalue="2">香蕉</option>

<optionvalue="3">火龙果</option>

<optionvalue="4">梨子</option>

<optionvalue="5">草莓</option>

<optionvalue="6">哈密瓜</option>

<optionvalue="7">椰子</option>

<optionvalue="8">猕猴桃</option>

<optionvalue="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

varstr=\'3,4,5,6\';

vararr=str.split(\',\');

$(\'#usertype\').selectpicker(\'val\', arr);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。