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 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
javascript 手动给表增加数据的小例子
Jul 10 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
javascript iframe跨域详解
Oct 26 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 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
ThinkPHP中Session用法详解
2014/11/29 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
php实现微信模板消息推送
2018/03/30 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
js单例模式详解实例
2013/11/21 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
python计算对角线有理函数插值的方法
2015/05/07 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
Python数据操作方法封装类实例
2017/06/23 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Django框架模板用法入门教程
2019/11/04 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
python读取xml文件方法解析
2020/08/04 Python
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
区域销售经理岗位职责
2015/04/02 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL