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 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
详谈 Jquery Ajax异步处理Json数据.
Sep 09 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
下拉框select的绑定示例
Sep 04 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
js实现筛选功能
Nov 24 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
typecho插件编写教程(一):Hello World
2015/05/28 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
JQuery toggle使用分析
2009/11/16 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
python3实现表白神器
2019/04/09 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
区域销售经理职责
2013/12/22 职场文书
长辈证婚人证婚词
2014/01/09 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
答辩状格式范本
2015/05/22 职场文书
廉洁自律证明
2015/06/24 职场文书