利用Bootstrap Multiselect实现下拉框多选功能
利用Bootstrap Multiselect实现下拉框多选功能,并在点击事件中获取到所有选中option的value值
首先展示项目案例:
多选下拉框功能实现.gif
下面是所有完整的代码,重点以及主要的解释已经在代码内进行注释:
引入的css、js文件需要从github中下载:https://github.com/davidstutz/bootstrap-multiselect
插件依赖jQ和bootstrap,所以在引入插件之前需要先引入这jQ和bootstrap的css和js文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实现下拉框多选功能</title>
<link rel="stylesheet" href="docs/css/bootstrap-3.3.2.min.css" rel="external nofollow" type="text/css">
<link rel="stylesheet" href="docs/css/bootstrap-example.min.css" rel="external nofollow" type="text/css">
<link rel="stylesheet" href="docs/css/prettify.min.css" rel="external nofollow" type="text/css">
<script type="text/javascript" src="docs/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="docs/js/bootstrap-3.3.2.min.js"></script>
<script type="text/javascript" src="docs/js/prettify.min.js"></script>
<link rel="stylesheet" href="dist/css/bootstrap-multiselect.css" rel="external nofollow" type="text/css">
<script type="text/javascript" src="dist/js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
$(document).ready(function () {
window.prettyPrint() && prettyPrint();
});
// 插件实例
$(document).ready(function () {
$("#example-getting-started").multiselect();
// 点击事件获取所有选中option的value值
$("#btn").click(function () {
var selectValueStr = [];
$("#example-getting-started option:selected").each(function () {
selectValueStr.push($(this).val());
})
console.log(selectValueStr)
})
});
</script>
</head>
<body>
<button id="btn">获取选中得option中value值</button>
<select id="example-getting-started" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="Mozzarella">Mozzarella</option>
<option value="Mushrooms">Mushrooms</option>
<option value="Pepperoni">Pepperoni</option>
<option value="Onions">Onions</option>
</select>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS组件中bootstrap multiselect两大组件较量
两个这种组件,大体样式和功能基本相同,本文就来带领大家看看这两个组件的用法. 一.组件说明以及API 1.第一个组件--multiple-select.这个组件风格简单.文档全.功能强大.但是觉得它选中的效果不太好.关于它的效果展示,我们放在后面. 2.第二个组件--bootstrap-multiselect.这个组件风格和第一个非常相似,文档也挺全面. 二.Multiple-select组件 1.组件说明 这个组件需要的浏览器支持如下: IE 7+ Chrome 8+ Firefox 10+
-
Bootstrap Multiselect 常用组件实现代码
实际的项目网站中或多或少的或用到多选框,我选用的一款是 Bootstrap Multiselect. 官方文档:http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html 如果你英文好一点,里面有详细的介绍,多选框的设置,多选框获取值/文本,选项分组,各种各样丰富的表现方式和获取. 结合实际项目,加深技术理解,同时也方便自己后续项目中的使用. 多选框和单选框相同,实际项目中前端不可能将里面的选项很直
-
Bootstrap 下拉多选框插件Bootstrap Multiselect
引入文件: <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/> <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/> <script type="text/ja
-
bootstrap multiselect 多选功能实现方法
官方教程 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
-
bootstrap multiselect下拉列表功能
bootstrap-multiselect基于原生态的下拉列表添加更多的功能及更好的视觉效果! 1.源码地址 https://github.com/davidstutz/bootstrap-multiselect 2.效果展示 3.代码示例 引入的js和css <script src="js/jquery-1.11.3.js"></script> <script src="js/bootstrap.js"></script&
-
基于BootStrap multiselect.js实现的下拉框联动效果
背景:当option特别多时,一般的下拉框选择起来就有点力不从心了,所以使用multiselect是个很好的选择,可以通过输入文字来选择选项很方便,但是有一个需要下拉框联动,网上找了半天才找到解决方法,在此分享一下 1.先引入 <script src="~/Assets/js/bootstrap-multiselect.min.js"></script> <link href="~/Assets/css/bootstrap-multiselect
-
利用Bootstrap Multiselect实现下拉框多选功能
利用Bootstrap Multiselect实现下拉框多选功能,并在点击事件中获取到所有选中option的value值 首先展示项目案例: 多选下拉框功能实现.gif 下面是所有完整的代码,重点以及主要的解释已经在代码内进行注释: 引入的css.js文件需要从github中下载:https://github.com/davidstutz/bootstrap-multiselect 插件依赖jQ和bootstrap,所以在引入插件之前需要先引入这jQ和bootstrap的css和js文件. <!
-
EasyUI实现下拉框多选功能
本文实例为大家分享了EasyUI实现下拉框多选展示的具体代码,供大家参考,具体内容如下 效果图: 这个没什么说的,直接引入css和js文件和图片,调用js即可.下面是源码: <html> <head> <meta charset="utf-8" /> <title>利用EasyUI实现多选下拉框</title> <link rel="stylesheet" type="text/css&qu
-
Bootstrap select实现下拉框多选效果
在学习bootstrap实现下拉多选效果的时候,觉得该效果很好,所以拿来分享下,这里就不详细的描述了,直接附上代码给各位看看 HTML代码: <div class= "row" style ="margin-top :10px;"> <div class= "form-group col-xs-12"> <label for= "sceneModel_title" class="col-
-
jquery实现下拉框多选方法介绍
一.说明 本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下 二.代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w
-
jQuery实现下拉框多选 jquery-multiselect 的实例代码
先给大家展示下效果图: 除了jquery,需要引用的样式和js文件: <link rel="stylesheet" type="text/css" href="../assets/jquery.multiselect.css" /> <link rel="stylesheet" type="text/css" href="../assets/style.css" /&g
-
Angular实现下拉框模糊查询功能示例
本文实例讲述了Angular实现下拉框模糊查询功能.分享给大家供大家参考,具体如下: 前两天研究了一下angularjs,不得不说angularjs的mvc思想还是很强大的.对应偏重于数据处理的项目还是非常有优势的. 写了个搜索下拉框的demo,注释在里边都写了,就不再这罗嗦了. 1. 普通方式实现 <!DOCTYPE html> <html> <head lang="zh_CN"> <meta charset="utf-8"
-
js实现Select下拉框具有输入功能的方法
本文实例讲述了js实现Select下拉框具有输入功能的方法.分享给大家供大家参考.具体实现方法如下: 实现方法一 复制代码 代码如下: <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>js实现可输入的下拉框</TITLE> </HEAD> <BODY> <div style="
-
jQuery实现下拉框选择图片功能实例
本文实例讲述了jQuery实现下拉框选择图片功能.分享给大家供大家参考.具体如下: 让下拉框中显示图片,并可选择对应图片,让select下拉框不仅可显示文字,还可以显示图片内容.为了更生动些,这里还加入了jQuery动画效果,当展开Select列表的时候,图片渐变显示.使用了一个jQ插件:imageselect.js,使用效果的朋友可以自己下载吧. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <title>支持图片选择的jQuery
-
Select下拉框模糊查询功能实现代码
select下拉列表框支持输入模糊查询功能,设计非常的人性化,下面小编给大家分享了关键代码,大家根据自己的需求适当的添加修改,有任何问题欢迎给我反馈. 关键代码如下所示: <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>可输入的下拉框</TITLE> </HEAD> <BODY > <S
-
基于bootstrap实现多个下拉框同时搜索功能
本文实例为大家分享了bootstrap实现下拉框搜索展示的具体代码,供大家参考,具体内容如下 1.第一个下拉框代码 <div class="btn-group col-sm-3 col-xs-6 util-btn-margin-bottom-5 quick-search"> <!--快速查询--> <div class="input-group"> <span class="input-group-addon&qu