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 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
jquery radio 操作代码
Mar 16 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
layui 弹出层值回传解决方式
Nov 14 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 smarty的预保留变量总结
2008/12/04 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
python实现备份目录的方法
2015/08/03 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
Python断言assert的用法代码解析
2018/02/03 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
python实现批量转换图片为黑白
2020/06/16 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
世界上最好的足球商店:Unisport
2019/03/02 全球购物
精彩的演讲稿开头
2014/05/08 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
公司领导班子对照材料
2014/08/18 职场文书
民政工作个人总结
2015/02/28 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
关于python类SortedList详解
2021/09/04 Python
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记