html部分代码，引用及整体项目Github项目地址:https://github.com/CNbozi/combobox
  1 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

   <title>Dropdown.js - a lightweight dropdown of jQuery plugins </title>

   <link rel="stylesheet" type="text/css" href="bootstrap.css">

   <script type="text/javascript" src="mock.js"></script>

   <script src="jquery.min.js"></script>

   <link rel="stylesheet" type="text/css" href="./jquery.dropdown.css">

   <script src="./jquery.dropdown.js"></script>

   <style>

     body {

       width: 80%;

       margin: 0 auto;

       padding-bottom: 200px;

     }

   </style>

 </head>

 <body>

   <form action="">

     <div class="row">

       <div class="col-sm-4">

         <div class="dropdown-mul-1" style="width: 400px;">

           <select style="display:none;width: 400px" name="" id="fields" multiple placeholder="请选择"> </select>

           <style>

             .dropdown-search{

               width: 1px;!important;

               height: 1px;!important;

             }

           </style>

         </div>

       </div>

     </div>

   </form>

   <script>

     var Random = Mock.Random;

     var json1 = Mock.mock({

       "data|10-50": [{

         name: function() {

           return Random.name(true)

         },

         "id": function() {

           return Random.cword(3);

         },

         //"disabled|1-2": true,

        // groupName: '分组名',

         //"groupId|1-4": 1,

         "selected": false

       }]

     });

     var data = '[{"selected":false,"name":"风险预警","id":"1"},{"selected":false,"name":"过程控制","id":"2"},{"selected":false,"name":"风控绩效","id":"3"},{"selected":false,"name":"结果合规","id":"4"}]';

     var dataJson = JSON.parse(data);

     var select = ["2","1"];

     $.each(select,function(index,value){

         $.each(dataJson,function(jindex,obj){

             if(value == obj.id){

                 obj.selected = true;

             }

         })

     })

     var dropdown = $('.dropdown-mul-1').dropdown({

       data:  dataJson,

       limitCount: 2000,

       multipleMode: 'label',

       choice: function(xxxx, event) {

         console.log(xxxx, this);

       },

       del : function(){

         alert(1);

       }

     });

     $("#del").click(function(){

         dropdown.destroy();

         var data = '[{"selected":false,"name":"风险预警","id":"1"},{"selected":false,"name":"过程控制","id":"2"},{"selected":false,"name":"风控绩效","id":"3"},{"selected":false,"name":"结果合规","id":"4"}]';

         var dataJson = JSON.parse(data);

         $.each(select,function(index,value){

             $.each(dataJson,function(jindex,obj){

                 if(value == obj.id){

                     obj.selected = true;

                 }

             })

         })

         dropdown = $('.dropdown-mul-1').dropdown({

           data:  dataJson,

           limitCount: 2000,

           multipleMode: 'label',

           choice: function(xxxx, event) {

             console.log(xxxx, this);

       }

     });

     });

   </script>

 </body>

 </html>

适用于IE8浏览器的bootsarp下拉菜单（支持多选，全选)的更多相关文章

  1. 使用JQUERY的flexselect插件来实现将SELECT下拉菜单变成自动补全输入框

    这也是下拉列表太长了之后,使用的同事提出来的意见, 然后,本来开始想将DJANGO的那个后台下拉菜单移植过来的,但发现不现实,也麻烦, 就找了几个JQUERY的插件测试了一下,最后选中了flexsel ...

  2. Bootstrap 下拉菜单和滚动监听插件

    一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...

  3. 第二百四十四节，Bootstrap下拉菜单和滚动监听插件

    Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...

  4. Bootstrap下拉菜单

    前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...

  5. 下拉菜单select高度（兼容IE6/IE7/IE8/火狐等主流浏览器）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 支持多种浏览器的纯css下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

  8. selector在手机上或浏览器显示各种姿势（虚拟下拉菜单）

    测试机型:小米.华为.苹果 测试浏览器:Chrome.Safari.Firefox 最后的结果就是你搞你的,我搞我的! 我认为这样漂亮,你认为那样漂亮(我认为你们都统一!) 因为项目时间紧,所以直接用 ...

  9. 一款多浏览器兼容的javascript多级下拉菜单

    这个多级下拉菜单的脚本大小不到2K,带有动画效果,可以方便地支持多个实例,并且能良好兼容WordPress系统wp_list_cats和wp_list_pages生成的多级列表.要初始化一个菜单,只需 ...

随机推荐

  1. INSERT INTO语句的基本用法

    原文链接:https://www.cnblogs.com/mingmingming/p/11295200.html 一.INSERT INTO语句的基本用法 INSERT INTO 语句用于往表中插入 ...

  2. Spark文档阅读之一：Spark Overview

    Document: https://spark.apache.org/docs/latest/index.html 版本:2.4.5   1. spark的几种执行方式 1)交互式shell:bin/ ...

  3. TCP 重置攻击的工作原理

    原文链接:https://fuckcloudnative.io/posts/deploy-k3s-cross-public-cloud/ TCP 重置攻击 是使用一个单一的数据包来执行的,只有几个字节 ...

  4. ASP.NET Core 对Controller进行单元测试

    单元测试对我们的代码质量非常重要.很多同学都会对业务逻辑或者工具方法写测试用例,但是往往忽略了对Controller层写单元测试.我所在的公司没见过一个对Controller写过测试的.今天来演示下如 ...

  5. 磨皮美颜算法 附完整C代码

    前言 2017年底时候写了这篇<集 降噪 美颜 虚化 增强 为一体的极速图像润色算法 附Demo程序> 这也算是学习过程中比较有成就感的一个算法. 自2015年做算法开始到今天,还有个把月 ...

  6. 都在讲DevOps，但你知道它的发展趋势吗？

    根据最近的一项集体研究,DevOps的市场在2017年创造了约29亿美元的产值,预计到2022年,这个数字将达到约66亿美元.人工智能的融入和安全性的融入,加上向自动化的巨大转变,可合理预测,在202 ...

  7. Spring IoC 自定义标签解析

    前言 本系列全部基于 Spring 5.2.2.BUILD-SNAPSHOT 版本.因为 Spring 整个体系太过于庞大,所以只会进行关键部分的源码解析. 本篇文章主要介绍 Spring IoC 容 ...

  8. APP测试之内存命令查询

    CPU占有率            adb shell dumpsys cpuinfo :获取本机CPU占有率            adb shell dumpsys  cpuinfo | find ...

  9. 前端进阶笔记之核心基础知识---那些HTML标签你熟悉吗？

    目录 1.交互实现 1.1 meta标签:自动刷新/跳转 1.2 title标签:消息提醒 2.性能优化 2.1 script标签:调整加载顺序提升渲染速度 2.2 link标签:通过预处理提升渲染速 ...

  10. 线性表的顺序存储和链式存储c语言实现

    一.线性表的顺序存储 typedef int ElemType;typedef struct List { ElemType *data;//动态分配 ,需要申请空间 int length; }Lis ...