利用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 相关文章推荐
你可能不再需要JQUERY
Mar 09 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
JavaScript实现星级评分
Jan 12 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
JS实现放烟花效果
Mar 10 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
?繁体转换的class
2006/10/09 PHP
php你的验证码安全码?
2007/01/02 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
python简单的函数定义和用法实例
2015/05/07 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
详解python with 上下文管理器
2020/09/02 Python
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
毕业生幼师求职自荐信
2013/10/01 职场文书
女娲补天教学反思
2014/02/05 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
交通违章检讨书
2014/09/21 职场文书
贪污检举信范文
2015/03/02 职场文书
出国留学自荐信模板
2015/03/06 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL