1. 下载源码和文档
git-hub 源码:/wenzhixin/multiple-select
参考文档:https://multiple-.cn/docs/en/options.html
2. 解压找到 dist 文件夹
3. 个人示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../css/multiple-select.css"></head><body><div><select name='column' multiple="multiple"><!-- <option value='1'> 选项一 </option><option value='2'> 选项二 </option><option value='3'> 选项三</option> --></select></div></body><script src="../3dLib/jquery-3.4.1.js"></script><script src="../3dLib/multiple-select.js"></script><!-- <script src="../3dLib/multiple-select.min.js"></script> --><script src="../3dLib/multiple-select-locale-all.js"></script><script>var opts = {};var cMultipleSelect = $("select[name='column']").multipleSelect({locale: "zh-CN",width: 200,data: [{ //设置选项text: "耕地",value: "gd"}, {text: "林地",value: "gd"}, {text: "断层",value: "gd"}, {text: "硝酸盐地层",value: "gd"}, {text: "地下水层",value: "gd"}, {type: 'optgroup',label: 'Group 1',children: [{text: 'Option 1',value: 1}, {text: 'Option 2',value: 2}, {text: 'Option 3',value: 3}]}],placeholder: "请选择",/******************事件监听*********************/onCheckAll: multiSelCheckAll, //全选onUncheckAll: multiSelCheckAll, //取消全选onClick: multiSelClick, //点击/******************事件监听结束*********************/});function multiSelCheckAll() {debugger;var opts = getOptions();console.log(this.data);}function multiSelClick(data) {/***************方法调用****************/var opts = cMultipleSelect.multipleSelect("getSelects", "text"); //获取方法// var opts = cMultipleSelect.multipleSelect("getOptions");/***************方法调用结束****************/console.log(data);}function getOptions(data) {debugger}</script></html>
4.查看示例
切换示例和源码https://multiple-.cn/examples#single-row.html#view-source