利用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(JS)替换节点实现思路介绍
Apr 17 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 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 文件扩展名 获取函数
2009/06/03 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
yii数据库的查询方法
2015/12/28 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
比较完整的微信开发php代码
2016/08/02 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
javascript事件问题
2009/09/05 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
python类参数self使用示例
2014/02/17 Python
将python图片转为二进制文本的实例
2019/01/24 Python
Django时区详解
2019/07/24 Python
python 实现多维数组(array)排序
2020/02/28 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
班组安全员工作职责
2014/02/01 职场文书
大学感恩节活动总结
2015/05/05 职场文书
干部外出学习心得体会
2016/01/18 职场文书