官網：http://loudev.com/
先看插件的效果和功能
靜態頁面具體實現步驟：
-
第一步：創建HTML文件
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> |
-
第二步：引入Jquery、Bootstrap插件、jquery.multi-select.min.js 以及相關的css文件
- 我這里演示都是使用CDN加速
| <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> <link href="https://cdn.bootcss.com/multi-select/0.9.12/css/multi-select.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.js"></script> <script src="https://cdn.bootcss.com/multi-select/0.9.12/js/jquery.multi-select.min.js"></script>
|
- 第三步：頁面加入select標簽以及靜態選項，后面會加動態選項以及數據回顯功能
| <div align="center"> <select id="optgroup" multiple="multiple"> <option value="李一">李一</option> <option value="李二">李二</option> <option value="李三">李三</option> <option value="李四">李四</option> <option value="李五">李五</option> <option value="李六">李六</option> <option value="李七">李七</option> <option value="李八">李八</option> <option value="李九">李九</option> <option value="李十">李十</option> </select> </div> |
- 第四步：在js中進行插件的初始化操作：
| <script> $(function() { // 初始化 $('#optgroup').multiSelect({ selectableHeader: '<input class="col-sm-12 border bg-white text-size-sm" type="text" disabled placeholder="所有聯系人" style="border-bottom:0;border-radius:3px 3px 0 0;padding-top:3px;padding-bottom:3px;"><br>', selectionHeader: '<input class="col-sm-12 border bg-white text-size-sm" type="text" disabled placeholder="已選聯系人" style="border-bottom:0;border-radius:3px 3px 0 0;padding-top:3px;padding-bottom:3px;"><br>', selectableOptgroup: false, afterSelect: function(values) { select.modifyselectNum('#optgroup'); }, afterDeselect: function(values) { select.modifyselectNum('#optgroup'); } }); }); </script>
//對初始化文件的解讀：
|
6.我們可以在selectableHeader和selectionHeader這兩個方法中輸出選中的值到控制台，然后就可以對選中的值進行操作。
| afterSelect: function(values) { console.log("選中了"+values) },
afterDeselect: function(values) { console.log("取消了"+values) } |
7.控制台輸出：
