Bootstrap select多选下拉框实现代码


Posted in Javascript onDecember 23, 2016

前言

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

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

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

需要引用的它们

<!-- 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多选代码如下

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

页面效果:

Bootstrap select多选下拉框实现代码

选择后的效果如下:

Bootstrap select多选下拉框实现代码

获取值, $("#XXX").val()即可

回显操作:

用方法 $('.selectpicker').selectpicker('val', 'Mustard'); 

Mustard处填入数组。代码如下:

var str='3,4,5,6';
var arr=str.split(',');
$('#usertype').selectpicker('val', arr);

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

Javascript 相关文章推荐
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
javascript实现tab切换特效
Nov 12 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
JS轮播图的实现方法
Aug 24 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 #Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 #Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 #Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 #Javascript
Bootstrap源码解读排版(1)
Dec 23 #Javascript
简单实现JS倒计时效果
Dec 23 #Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 #Javascript
You might like
PHP.MVC的模板标签系统(一)
2006/09/05 PHP
php&amp;java(二)
2006/10/09 PHP
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
PHP中的session安全吗?
2016/01/22 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
python搭建虚拟环境的步骤详解
2016/09/27 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
经贸日语专业个人求职信范文
2014/04/29 职场文书
白莲教口号
2014/06/18 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
zabbix监控mysql的实例方法
2021/06/02 MySQL
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
python数字类型和占位符详情
2022/03/13 Python
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript