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

最新推荐文章于 2024-05-23 11:01:45 发布

weixin_34357267

最新推荐文章于 2024-05-23 11:01:45 发布

阅读量664

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/Desmondexperience/p/10862410.html

版权

    html部分代码，引用及整体项目Github项目地址:https://github.com/CNbozi/combobox
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5   <meta charset="UTF-8">
  6   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7   <title>Dropdown.js - a lightweight dropdown of jQuery plugins </title>
  8   <link rel="stylesheet" type="text/css" href="bootstrap.css">
  9   <script type="text/javascript" src="mock.js"></script>
 10   <script src="jquery.min.js"></script>
 11   <link rel="stylesheet" type="text/css" href="./jquery.dropdown.css">
 12   <script src="./jquery.dropdown.js"></script>
 13   <style>
 14     body {
 15       width: 80%;
 16       margin: 0 auto;
 17       padding-bottom: 200px;
 18     }
 19   </style>
 20 </head>
 21 
 22 <body>
 23   <form action="">
 24     <div class="row">
 25       <div class="col-sm-4">
 26         <div class="dropdown-mul-1" style="width: 400px;">
 27           <select style="display:none;width: 400px" name="" id="fields" multiple placeholder="请选择"> </select>
 28           <style>
 29             .dropdown-search{
 30               width: 1px;!important;
 31               height: 1px;!important;
 32             }
 33           </style>
 34         </div>
 35       </div>
 36     </div>
 37   </form>
 38   <script>
 39     var Random = Mock.Random;
 40     var json1 = Mock.mock({
 41       "data|10-50": [{
 42         name: function() {
 43           return Random.name(true)
 44         },
 45         "id": function() {
 46           return Random.cword(3);
 47         },
 48         //"disabled|1-2": true,
 49        // groupName: '分组名',
 50         //"groupId|1-4": 1,
 51         "selected": false
 52       }]
 53     });
 54     var data = '[{"selected":false,"name":"风险预警","id":"1"},{"selected":false,"name":"过程控制","id":"2"},{"selected":false,"name":"风控绩效","id":"3"},{"selected":false,"name":"结果合规","id":"4"}]';
 55     var dataJson = JSON.parse(data);
 56     var select = ["2","1"];
 57     $.each(select,function(index,value){
 58         $.each(dataJson,function(jindex,obj){
 59             if(value == obj.id){
 60                 obj.selected = true;
 61             }
 62         })
 63     })
 64     var dropdown = $('.dropdown-mul-1').dropdown({
 65       data:  dataJson,
 66       limitCount: 2000,
 67       multipleMode: 'label',
 68       choice: function(xxxx, event) {
 69         console.log(xxxx, this);
 70       },
 71       del : function(){
 72         alert(1);
 73       }
 74     });
 75 
 76 
 77     $("#del").click(function(){
 78         dropdown.destroy();
 79         var data = '[{"selected":false,"name":"风险预警","id":"1"},{"selected":false,"name":"过程控制","id":"2"},{"selected":false,"name":"风控绩效","id":"3"},{"selected":false,"name":"结果合规","id":"4"}]';
 80         var dataJson = JSON.parse(data);
 81         $.each(select,function(index,value){
 82             $.each(dataJson,function(jindex,obj){
 83                 if(value == obj.id){
 84                     obj.selected = true;
 85                 }
 86             })
 87         })
 88         dropdown = $('.dropdown-mul-1').dropdown({
 89           data:  dataJson,
 90           limitCount: 2000,
 91           multipleMode: 'label',
 92           choice: function(xxxx, event) {
 93             console.log(xxxx, this);
 94       }
 95     });
 96     });
 97 
 98 
 99 
100 
101   </script>
102 </body>
103 
104 </html>

转载于:https://www.cnblogs.com/Desmondexperience/p/10862410.html

weixin_34357267

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
适用于IE8浏览器的bootsarp下拉菜单（支持多选，全选)

html部分代码，引用及整体项目Github项目地址:https://github.com/CNbozi/combobox 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta nam...
复制链接

扫一扫