前言

项目中要实现多选,就想到用插件,选择了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. 浅谈dubbo服务

    Dubbo分布式服 推荐大家一个画图工具:https://www.processon.com/i/572d51efe4b0c3c74981ec14 1.Dubbo是一个分布式服务框架,致力于提供高性能 ...

  2. SSM框架之MyBatis入门介绍

    一.什么是MyBatis? MyBatis源自Apache的iBatis开源项目, 从iBatis3.x开始正式更名为MyBatis.它是一个优秀的持久层框架. 二.为什么使用MyBatis? 为了和 ...

  3. linux各种服务的搭建

    https://blog.csdn.net/qq_33571718/article/details/81543408    VPN --linux服务搭建 https://blog.csdn.net/ ...

  4. Intel虚拟化技术——EPT、VPID

    背景 内存用于暂存CPU将要执行的指令和数据,所有程序的运行都必须先载入到内存中才可以,内存的大小及其访问速度也直接影响整个系统性能.在平台虚拟化技术中,Guest的运行也需要依赖内存.和运行在真实物 ...

  5. HQL基本语法及应用案例

    HQL基本语法及应用案例 摘自:<大数据技术体系详解:原理.架构与实践> 一.HQL基本语法 HQL是Hive提供的数据查询语言,由于Hive巨大的影响力,HQL已被越来越多的Hive O ...

  6. Java synchronized实现原理总结和偏量锁、轻量锁、重量锁、自旋锁

    synchronized实现同步的基础:Java中的每一个对象都可以作为锁.具体表现为以下3种形式. 对于普通同步方法,锁是当前实例对象(this). 对于静态同步方法,锁是当前类的Class对象. ...

  7. linux系统编程之文件与io(四)

    今天继续学习文件与io,主要是学习文件共享及文件.复制文件描述符,有点抽象,主要是概念上的理解,但是很重要,下面一一来分解: 文件共享: 回顾一下,在linux系统调用中,是通过文件描述符来访问文件的 ...

  8. WPF系列——简单绑定学习

    1. 绑定到元素对象.(实际项目中用处不大) 界面上两个关联的控件之间绑定,比如一个TextBlock 的FontSize和一个Slider 的Value绑定: <Slider Name=&qu ...

  9. LOJ#2764. 「JOI 2013 Final」JOIOI 塔

    题目地址 https://loj.ac/problem/2764 题解 真的想不到二分...不看tag的话... 考虑二分答案转化为判定问题,那么问题就变成了能不能组合出x个JOI/IOI,考虑贪心判 ...

  10. dedecms织梦第三方登录插件-QQ登录、微博登录、微信登录

    织梦程序集成第三方QQ登录.微博登录.微信登录,获取QQ.微博.微信,并存储至数据库,一键注册为网站会员,不用再次填写绑定信息,方便粘贴用户更强. 织梦第三方登录效果 第三方登录插件特点 1.所有文件 ...