xm-select-v1.2.1 主页资源可免费下载~
先看结果
js code
<script src="../static/xmSelect/xm-select.js"></script><div id="demo" class="xm-select-demo" style="width: 300px; margin: 20px;"></div><script>layui.config({base: '静态文件根路径/'}).extend({// 根路径下的具体路径(xmSelect/xmSelect.js)xmSelect: 'xmSelect/xmSelect'}).use(['xmSelect'], function () {// 开始使用xmSelectvar xmSelect = layui.xmSelect;xmSelect.render({el: '#demo', toolbar: {show: true}, // 开启清空 全选// 监听下拉框on: function (data) { // arr: 当前多选已选中的数据var arr = data.arr;// change, 此次选择变化的数据,数组var change = data.change;// isAdd, 此次操作是新增还是删除var isAdd = data.isAdd;console.log(arr);},data: []});});$.ajax({dataType: "json",type: 'get',url:" ",success: function (res) {demo.update({data: res.data})}});</script>
返回数据类型跟layui一样,区别在于data数组里的vo
{"code": 0,"msg": "success","data": [{name: '张三', value: 1},{name: '李四', value: 2},{name: '水果',children: [{name: '苹果', value: 3},{name: '香蕉', value: 4},{name: '梨', value: 5}]},{name: '蔬菜',children: [{name: '萝卜', value: 6},{name: '白菜', value: 7}]}}
更多玩法参考 xm-select