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. windows server2012 安装SQL SERVER 2016环境监测出错

    Windows Server 2012 R2 安装SQL Server 2016 顺序为:KB2919442 ——> KB2919355 ——> SQL Server 2016 并且还要安 ...

  2. cc23b_demo-函数对象c++ 调用操作符的重载与函数对象-//用模板定义一元谓词、代码示范

    //用模板定义一元谓词. #include <iostream> #include <vector> #include <algorithm> using name ...

  3. WeChair项目Beta冲刺(2/10)

    团队项目进行情况 1.昨日进展    Beta冲刺第二天 昨日进展: 昨天由于组内成员课程繁重,但是大家还是花时间一起开会谈论了开发的一些细节和交流了一些问题 2.今日安排 前端:扫码占座功能和预约功 ...

  4. Python3-算法-递归

    递归 递归算法是指一般通过函数或子进程来实现,在函数或子进程的内部,直接或间接地调用自己的算法,说白了就是自己调自己 注: 1.在使用递归的时候,必须要有一个递归出口,即一个明确的结束条件,否则就是死 ...

  5. linux 配置ssh免密登录

    一.SSH概念(百度) SSH 为 Secure Shell 的缩写,由 IETF 的网络小组(Network Working Group)所制定:SSH 为建立在应用层基础上的安全协议.SSH 是目 ...

  6. mysql无限级分类

    第一种方案: 使用递归算法,也是使用频率最多的,大部分开源程序也是这么处理,不过一般都只用到四级分类. 这种算法的数据库结构设计最为简单.category表中一个字段id,一个字段fid(父id).这 ...

  7. Vue前端压缩图片

    一.在组件包下新建compressImage.js // 压缩图片 // eslint-disable-next-line no-unused-vars export function compres ...

  8. 在linux裸机部署springBoot项目

    一.项目创建及打包 创建项目,打jar包 二.安装JDK 1.在/usr目录下床架java文件夹,将 2.下载jdk8,并上传linux服务器(/usr/java) 下载地址:https://www. ...

  9. 谈反应式编程在服务端中的应用，数据库操作优化，提速 Upsert

    反应式编程在客户端编程当中的应用相当广泛,而当前在服务端中的应用相对被提及较少.本篇将介绍如何在服务端编程中应用响应时编程来改进数据库操作的性能. 开篇就是结论 接续上一篇<谈反应式编程在服务端 ...

  10. 用JS实现改变文本框的只读属性

    <input id="aaa" readonly><input id="bbb" readonly> <script>doc ...