bootstrap multiselect 多选功能实现方法


Posted in Javascript onJune 05, 2017

官方教程

http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html

使用方法:

第一步引用样式以及相关JS

<link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" rel="external nofollow" type="text/css"/>

 第二步 构造Selection(注意 需要设置multiple属性,否则依然是单选模式,multiple="multiple" )

<!-- Build your select: -->
<select class="multiselect" multiple="multiple">
 <option value="cheese">Cheese</option>
 <option value="tomatoes">Tomatoes</option>
 <option value="mozarella">Mozzarella</option>
 <option value="mushrooms">Mushrooms</option>
 <option value="pepperoni">Pepperoni</option>
 <option value="onions">Onions</option>
</select>

 第三步 初始化插件:

<script type="text/javascript">
 $(document).ready(function() {
  $('.multiselect').multiselect();
 });
</script>

常用方法:

select
$('#cid').multiselect('select', arr[i]); 给控件设置选中项

获取值

$('#cid').val();获取控件所有的选中值

以上所述是小编给大家介绍的bootstrap multiselect 多选功能实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
Javascript 设计模式(二) 闭包
May 26 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
koa-router源码学习小结
Sep 07 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 #Javascript
详解Angular 4 表单快速入门
Jun 05 #Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 #Javascript
Node.js开发第三方微信公众平台
Jun 05 #Javascript
js自定义Tab选项卡效果
Jun 05 #Javascript
纯js实现动态时间显示
Sep 07 #Javascript
深入理解Angular.JS中的Scope继承
Jun 04 #Javascript
You might like
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
两个php日期控制类实例
2014/12/09 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
在python中的socket模块使用代理实例
2014/05/29 Python
Python os模块学习笔记
2015/06/21 Python
django2 快速安装指南分享
2018/01/05 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
面试求职的个人自我评价
2013/11/16 职场文书
董事长助理工作职责
2014/06/08 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
总经理岗位职责
2015/02/04 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
纪录片信仰观后感
2015/06/08 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js