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必备 api中英文对照的chm手册 下载
May 03 Javascript
javascript 选择文件夹对话框(web)
Jul 07 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 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
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
python基础教程之Hello World!
2014/08/29 Python
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Python实现文件按照日期命名的方法
2015/07/09 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
python实现图片批量压缩程序
2018/07/23 Python
破解安装Pycharm的方法
2018/10/19 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
Python中的With语句的使用及原理
2020/07/29 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
几个常见的软件测试问题
2016/09/07 面试题
周年庆典邀请函范文
2014/01/24 职场文书
教研活动总结
2014/04/28 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
租房协议书
2014/09/12 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
房屋所有权证明
2014/10/20 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2016年春节慰问信息
2015/03/25 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
旅游安全责任协议书
2016/03/22 职场文书
Go语言测试库testify使用学习
2022/07/23 Golang