利用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 相关文章推荐
2010年最佳jQuery插件整理
Dec 06 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
javascript制作2048游戏
Mar 30 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
三种Webpack打包方式(小结)
Sep 19 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
Angular性能优化之第三方组件和懒加载技术
May 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
php小偷相关截取函数备忘
2010/11/28 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
教你php如何实现验证码
2016/01/20 PHP
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
js中作用域的实例解析
2017/03/16 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
如何通过python画loss曲线的方法
2019/06/26 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
基于python代码批量处理图片resize
2020/06/04 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
什么是Assembly(程序集)
2014/09/14 面试题
职工代表大会主持词
2014/04/01 职场文书
英文请假条
2014/04/11 职场文书
心理健康活动总结
2014/04/30 职场文书
企业文化理念标语
2014/06/10 职场文书
2014年优秀党员材料
2014/12/18 职场文书
公务员年度个人总结
2015/02/12 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB