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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
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
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
fgetcvs在linux的问题
2012/01/15 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
python元组操作实例解析
2014/09/23 Python
Python中的True,False条件判断实例分析
2015/01/12 Python
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
python tkinter实现连连看游戏
2020/11/16 Python
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
通信工程毕业生自荐信
2013/11/01 职场文书
服装设计专业自荐书范文
2013/12/30 职场文书
党员培训思想汇报
2014/01/07 职场文书
培训讲师邀请函
2014/01/10 职场文书
2014年情人节活动方案
2014/02/16 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
小学教师评语大全
2014/04/23 职场文书
开会通知
2015/04/20 职场文书
表扬信范文
2015/05/04 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
党员反四风学习心得体会
2016/01/22 职场文书