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 相关文章推荐
JavaScript中的style.display属性操作
Mar 27 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
红米手机抢购的js代码
Mar 10 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
深入了解JS之作用域和闭包
Jun 16 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
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
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
javascript定时器完整实例
2015/02/10 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
Python 创建TCP服务器的方法
2020/07/28 Python
python中的unittest框架实例详解
2021/02/05 Python
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
什么是封装
2013/03/26 面试题
总结表彰大会主持词
2014/03/26 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS