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实用代码片段集合
Aug 12 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
ES6中Promise的使用方法实例总结
Feb 18 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Python实现数据库编程方法详解
2015/06/09 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
详解python中的线程与线程池
2019/05/10 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
Python线程指南分享
2019/11/19 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
python numpy库np.percentile用法说明
2020/06/08 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
精伦电子Java笔试题
2013/01/16 面试题
大学校庆邀请函
2014/01/11 职场文书
体现团队精神的口号
2014/06/06 职场文书
环保口号大全
2014/06/12 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
租赁协议书
2015/01/27 职场文书
党小组考察意见
2015/06/02 职场文书
工作会议简报
2015/07/20 职场文书
银行培训心得体会范文
2016/01/09 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技