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 相关文章推荐
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 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数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
php分页函数完整实例代码
2014/09/22 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
python 测试实现方法
2008/12/24 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python实现求数列和的方法示例
2018/01/12 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
《明天,我们毕业》教学反思
2014/04/24 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
公司地址变更通知
2015/04/25 职场文书
Pytest中conftest.py的用法
2021/06/27 Python
python使用BeautifulSoup 解析HTML
2022/04/24 Python