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 验证浏览器是否支持javascript的方法小结
May 17 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 Javascript
微信小程序点击滚动到指定位置的实现
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
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
javascript事件模型代码
2007/07/01 Javascript
javascript 框架小结 个人工作经验
2009/06/13 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
初学Python实用技巧两则
2014/08/29 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
Python 线程池用法简单示例
2019/10/02 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
python实现人像动漫化的示例代码
2020/05/17 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
商务日语专业毕业生自荐信
2014/03/27 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
个人整改措施书面材料
2014/10/24 职场文书
保送生自荐信范文
2015/03/26 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS
Spring 使用注解开发
2022/05/20 Java/Android