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>