前言

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

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

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

需要引用的它们

?

1

2

3

4

5

6

7

8

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

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

<!-- 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>

核心选项

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

核心方法

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

实例应用

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);

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

Bootstrap select多选下拉框实现代码的更多相关文章

  1. pentaho cde 自定义复选下拉框 checkbox select

    pentaho  自带的component 虽多,但是当用户需要在一个表格中查看多个组别的数据时,pentaho自带的单选框就不能实现了,所以复选下拉框势在必行,实现效果如下: 实现原理是借用了jqu ...

  2. Bootstrap3级联多选下拉框

    <!DOCTYPE html> <html> <head> <title>Bootstrap3级联多选下拉框</title> <met ...

  3. Easyui-Combobox多选下拉框

    因为工作需要,引入combobox多选下拉框,并且获取选择的值并以","分开. 效果如下: 代码如下: <html> <head> <title> ...

  4. js:jquery multiSelect 多选下拉框实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. DropDownList单选与多选下拉框

    一.单选DropDownList传值 1.添加界面的DropDownList显示值问题 (1)在方法内添加ViewData的方法: var ad = new UnitsRepository(); Vi ...

  6. js怎么能取得多选下拉框选中的多个值?

    方法:获取多选下拉框对象数组→循环判断option选项的selected属性(true为选中,false为未选中)→使用value属性取出选中项的值.实例演示如下: 1.HTML结构 1 2 3 4 ...

  7. js多选下拉框

    1.js原生实现 1.1:引用JS文件 /*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */ !function(a,b ...

  8. query多选下拉框插件 jquery-multiselect(修改)

    其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...

  9. MVC实现多选下拉框,保存并显示多选项

    在"MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽 ...

随机推荐

  1. 实战OpenGLES--iOS平台使用OpenGLES渲染YUV图片

    上一篇文章 实战FFmpeg--iOS平台使用FFmpeg将视频文件转换为YUV文件 演示了如何将视频文件转换为yuv文件保存,现在要做的是如何将yuv文件利用OpenGLES渲染展示出图像画面.要将 ...

  2. 本地ssh快速登录

    每次登录都要ssh -p wang@xx.xx.xx.xx 虽然做了公钥验证 https://www.cnblogs.com/php-linux/p/10795913.html 不需要输入密码,但是每 ...

  3. 解决远程连接数据库:Host is not allowed to connect to this MySQL server

    远程连接数据时,报以下提示: Host 'web1' is not allowed to connect to this MySQL server 原因是数据库服务不允许远程登录,没有授权导致,解决方 ...

  4. 写Shell脚本自动生成首行

    送给经常写shell脚本的兄弟们常写shell脚本的时候,大家一定都有困扰,怎么样能让.sh文件的表头自己生成,不用我们自己去敲呢 首先我们要编写一下/etc/vimrc执行 vim /etc/vim ...

  5. Python——结束语句

    条件语句: break 结束语句,表示达到某个目的后,将结束当前循环语句,break以下的代码都不执行.例如: for i in range(10): print("--------&quo ...

  6. WLAN实验1:划分不同VLAN及Acess配置

    实验环境 公司是一个较大的局域网,二层交换机S1放置在一楼,一楼有IT部门和人事部门.二层交换机S2放置在二楼,二楼有市场部和研发部.公司的策略是:不同部门的主机之间不能相互通信,同一部门的主机才可以 ...

  7. 大数据技术之Hadoop3.1.2版本伪分布式部署

    大数据技术之Hadoop3.1.2版本伪分布式部署 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.主机环境准备 1>.操作系统环境 [root@node101.yinzh ...

  8. Android AIDL使用详解_Android IPC 机制详解

    一.概述 AIDL 意思即 Android Interface Definition Language,翻译过来就是Android接口定义语言,是用于定义服务器和客户端通信接口的一种描述语言,可以拿来 ...

  9. Kotlin对象表达式深入解析

    嵌套类与内部类巩固: 在上一次https://www.cnblogs.com/webor2006/p/11333101.html学到了Kotlin的嵌套类与内部类,回顾一下: 而对于嵌套类: 归根结底 ...

  10. 均分纸牌(Noip2002)

    1320:[例6.2]均分纸牌(Noip2002) 时间限制: 1000 ms         内存限制: 65536 KB提交数: 3537     通过数: 1839 [题目描述] 有n堆纸牌,编 ...