利用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 相关文章推荐
JS+CSS实现一个气泡提示框
Aug 18 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 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中文本数据翻页(留言本翻页)
2006/10/09 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
详解python之协程gevent模块
2018/06/14 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
学生学习总结的自我评价
2013/10/22 职场文书
大学生个人简历中的自我评价
2013/12/27 职场文书
入学申请自荐信范文
2014/02/26 职场文书
家电业务员岗位职责
2014/03/10 职场文书
共产党员公开承诺书
2014/03/25 职场文书
公司任命书范本
2014/06/04 职场文书
初中家长意见
2015/06/03 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
年终工作总结范文
2019/06/20 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
Python matplotlib绘制雷达图
2022/04/13 Python
Vue Element plus使用方法梳理
2022/12/24 Vue.js