利用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的构造函数和constructor属性
Jan 09 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
子页向父页传值示例
Nov 27 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
Element InputNumber 计数器的实现示例
Aug 03 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
文件上传的实现
2006/10/09 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
Python递归遍历列表及输出的实现方法
2015/05/19 Python
详解Python编程中包的概念与管理
2015/10/16 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
Shell如何接收变量输入
2016/08/06 面试题
运动会入场解说词300字
2014/01/25 职场文书
表彰先进的通报
2014/01/31 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
新闻报道稿范文
2015/07/23 职场文书
财务人员入职担保书
2015/09/22 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL
Django框架中视图的用法
2022/06/10 Python