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 () {
// 开始使用xmSelect
var 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