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. git 的使用：

    git  的官方网址是: https://git-scm.com/downloads github 的官方网址: https://github.com/ git 的原理图: git 和 github ...

  2. JavaWeb网上图书商城完整项目--24.注册页面的css样式实现

    现在框架已经做好了,即下来我们要对页面进行装饰了,第一步给每一个元素添加id 1.最外面的div添加id为divMain 2.第二个div添加id为divTitle,里面的span对应的id为span ...

  3. Python3-random模块-生成伪随机数

    Python3中的random模块可以生成一个伪随机数 常用的就三个模块函数 random.random() 返回0-1之间的一个随机数 random.randrange(i, j) 返回一个随机数 ...

  4. offer到手！美团Java岗四面（多线程+redis+JVM+数据库）

    美团Java岗四面,已拿offer,前三面都是技术面,第四面是HR面,下面是面试题! 美团Java岗一面(技术,电话面,约40分钟) 自我介绍. 项目介绍. 了解过redis源码及redis集群么? ...

  5. ASP.NET MVC 中解决Session，Cookie等依赖的方式

    原文:https://blog.csdn.net/mzl87/article/details/90580869 本文将分别介绍在MVC中使用Filter和Model Binding两种方式来说明如何解 ...

  6. 图解resilience4j容错机制

    Resilience4j是一个轻量级.易于使用的容错库,其灵感来自Netflix Hystrix,但专为Java 8和函数式编程设计.轻量级,因为库只使用Vavr,它没有任何其他外部库依赖项.相比之下 ...

  7. JavaScript基础对象创建模式之命名空间(Namespace)模式(022)

    JavaScript中的创建对象的基本方法有字面声明(Object Literal)和构造函数两种,但JavaScript并没有特别的语法来表示如命名空间.模块.包.私有属性.静态属性等等面向对象程序 ...

  8. Spring Security(五) —— 动手实现一个 IP_Login

    摘要: 原创出处 https://www.cnkirito.moe/spring-security-5/ 「老徐」欢迎转载,保留摘要,谢谢! 5 动手实现一个IP_Login 在开始这篇文章之前,我们 ...

  9. （私人收藏）商务报告工作汇报PPT模板

    商务报告工作汇报PPT模板 https://pan.baidu.com/s/1tWPU6zUTVcV4TIhScoSrEwsjd0

  10. less的使用几个技巧

    1.层级关系 让这个box范围内的全部包进来,这样的话就完美的进行调节,再也不用到处找第几行第几个,我刚才在哪个位置给覆盖了.一看便知! .box{ width: 100%; height: 300p ...