<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> |
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
|
<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> |
<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>
//对初始化文件的解读:
|
afterSelect: function(values) { console.log("选中了"+values) },
afterDeselect: function(values) { console.log("取消了"+values) } |