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. （四）进行HTTPS请求并进行(或不进行)证书校验(示例)

    原文:https://blog.csdn.net/justry_deng/article/details/81042379 相关方法详情(非完美封装): /** * 根据是否是https请求,获取Ht ...

  2. 这一次搞懂Spring的Bean实例化原理

    文章目录 前言 正文 环境准备 两个重要的Processor 注册BeanPostProcessor对象 Bean对象的创建 createBeanInstance addSingletonFactor ...

  3. JavaWeb的登陆与注销功能

    JavaWeb 登录与注销 大致流程 一般我们在Web应用中 登录页面一般是以 login.jsp的首页 大致流程如下: 当我们在前台写入用户名和密码之后,点击登录按钮 会将表单提交给一个LoginS ...

  4. skywalking的核心概念

    在 SkyWalking 中,TraceSegment 是一个介于 Trace 与 Span 之间的概念,它是一条 Trace 的一段,可以包含多个 Span.在微服务架构中,一个请求基本都会涉及跨进 ...

  5. ElasticSearch中的sort排序和filedData作用

    默认情况下,ElasticSearch 会根据算分进行排序: 可以使用 sort API 指定排序的规则: POST /kibana_sample_data_ecommerce/_search { & ...

  6. 尚硅谷 dubbo学习视频

    1 1.搭建zookpeer注册中心 windows下载zooker  需要修改下zoo_sample .cfg为zoo.cnf 然后需要zoo.cnf中数据文件的路径 第五步:把zoo_sample ...

  7. centos 6.5 dhcp桥接方式上网络设置

    首先虚拟机和主机之间采用桥接模式 然后在虚拟机中进行设置,首先进入到目录 /etc/sysconfig/network-scripts/ [root@localhost ~]# cd /etc/sys ...

  8. 四层发现-UDP发现

    udp发现要注意选择一个不常用的端口,如果目标ip在up时目标端口是开放状态,那么不管目标ip是否为up状态,都不会收到任何回应,只有在目标ip为down状态且目标端口为关闭状态,才会返回一个目标不可 ...

  9. MyBatis学习笔记（2）--缓存

    一.什么是缓存 --存在于内存中的临时数据. 为什么使用缓存?--减少和数据库的交互次数,提高执行效率. 适用于缓存的数据: 1.经常查询并且不经常改变的数据. 2.数据的正确与否对最终结果影响较小的 ...

  10. SpringSceurity(5)---短信验证码登陆功能

    SpringSceurity(5)---短信验证码登陆功能 有关SpringSceurity系列之前有写文章 1.SpringSecurity(1)---认证+授权代码实现 2.SpringSecur ...