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. os.remove() 删除文件

    概述 os.remove() 方法用于删除指定路径的文件.如果指定的路径是一个目录,将抛出OSError. 在Unix, Windows中有效 语法 remove()方法语法格式如下: os.remo ...

  2. 【JMeter_08】JMeter逻辑控制器__While控制器<While Controller>

    While控制器<While Controller> 业务逻辑: 当条件为非false时,执行该节点下的脚本内容,判断条件包括数字.null.空白.字母.符号.true. 当条件为fals ...

  3. 在执行jar包时如何使用调优参数

    [本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] 使用时去掉换行 ...

  4. 【面试篇】寒冬求职之你必须要懂的Web安全

    https://segmentfault.com/a/1190000019158228 随着互联网的发展,各种Web应用变得越来越复杂,满足了用户的各种需求的同时,各种网络安全问题也接踵而至.作为前端 ...

  5. 用VMware克隆CentOS 6.5如何进行网络设置

    我们使用虚拟机的克隆工具克隆出了一个电脑,电脑连接采用nat方式 111电脑对于的ip地址设置如下 [root@localhost ~]# cd /etc/sysconfig/network-scri ...

  6. Python-argparse模块-获取命令行参数

    #!/usr/bin/python3 """ Author : Jet Bi License : www.cyeap.com Summary : 获取命令行的参数 Not ...

  7. Python 简明教程 --- 18，Python 面向对象

    微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 代码能借用就借用. -- Tom Duff 目录 编程可分为面向过程编程和面向对象编程,它们是两种不 ...

  8. vue的生命函数周期以及钩子函数的详解

      首先我们先附上官网的图 图中展现出的是vue整个生命周期以及钩子函数 1- beforeCreate(创建前) 2- created(创建完成) 3- beforeMount(挂载前) 4- mo ...

  9. (七) SpringBoot起飞之路-整合SpringSecurity（Mybatis、JDBC、内存）

    兴趣的朋友可以去了解一下前五篇,你的赞就是对我最大的支持,感谢大家! (一) SpringBoot起飞之路-HelloWorld (二) SpringBoot起飞之路-入门原理分析 (三) Sprin ...

  10. js事件入门（6）

    7.事件冒泡机制 7.1.什么是事件冒泡 当一个元素接收到一个事件以后,会将事件传播给它的父级元素,它的负级元素会一层一层往上传播,直到最顶层window,这种事件传播机制叫作事件冒泡. <!D ...