官网：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.控制台输出：
