利用Bootstrap Multiselect实现下拉框多选功能


Posted in Javascript onApril 08, 2019

利用Bootstrap Multiselect实现下拉框多选功能,并在点击事件中获取到所有选中option的value值

首先展示项目案例:

利用Bootstrap Multiselect实现下拉框多选功能

多选下拉框功能实现.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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript firefox兼容ie的dom方法脚本
May 18 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 #Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 #Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 #Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 #Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 #Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 #Javascript
微信小程序实现bindtap等事件传参
Apr 08 #Javascript
You might like
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
Python的函数嵌套的使用方法
2014/01/24 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
详解python中的Turtle函数库
2018/11/19 Python
python图像和办公文档处理总结
2019/05/28 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
Hotels.com印度:酒店预订
2019/05/11 全球购物
工商企业管理实习自我鉴定
2013/12/04 职场文书
新年联欢会主持词
2014/03/27 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
贷款承诺书
2015/01/20 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
用JS创建一个录屏功能
2021/11/11 Javascript