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 相关文章推荐
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
js实现搜索栏效果
Nov 16 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
php 文本文件的读取效率
2012/02/10 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
python zip文件 压缩
2008/12/24 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
八一建军节感言
2014/02/28 职场文书
大学四年个人自我小结
2014/03/05 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书