网站开发接入本地天地图深圳专业软件网站建设

layui-xm-select 的功能强大，可多选、可下拉树、下拉日期多选、下拉折叠面板、下拉穿梭框、级联模式。
首先在引用layui css和js 的基础上，再引用js：layui-xm-select
layui-xm-select点击下载地址
基本使用

第一步: 下载
第二步: 引入 layui-xm-select.js
第三步: 写一个`<div id="demo1"></div>`
第四步: 渲染var demo1 = xmSelect.render({el: '#demo1',language: 'zn',data: [{name: '张三', value: 1},{name: '李四', value: 2},{name: '王五', value: 3},]})

代码案例：

<div id="demo1" class="xm-select-demo"></div>
<button class="btn" id="demo1-getValue">获取选中值</button>
<pre id="demo1-value"></pre><script>
var demo1 = xmSelect.render({el: '#demo1', language: 'zn',data: [{name: '张三', value: 1},{name: '李四', value: 2},{name: '王五', value: 3},]
})document.getElementById('demo1-getValue').onclick = function(){//获取当前多选选中的值var selectArr = demo1.getValue();document.getElementById('demo1-value').innerHTML = JSON.stringify(selectArr, null, 2);
}
</script>

默认选中值
selected是选中, disabled是禁用

<div id="demo2" class="xm-select-demo"></div><script>
var demo2 = xmSelect.render({el: '#demo2', data: [{name: '水果', value: 1, selected: true, disabled: true},{name: '蔬菜', value: 2, selected: true},{name: '桌子', value: 3, disabled: true},{name: '北京', value: 4},]
})
</script>

搜素值 添加 filterable: true
多选上限 max: 2

<div id="demo1" class="xm-select-demo"></div><script>
var demo1 = xmSelect.render({el: '#demo1', filterable: true,max: 2,data: [{name: '水果', value: 1},{name: '蔬菜', value: 2},{name: '桌子', value: 3},{name: '北京', value: 4},]
})
</script>

给多选赋值

<div id="demo1" class="xm-select-demo"></div>
<br/><br/>
<button class="btn" id="demo1-test1">赋值张三</button>
<button class="btn" id="demo1-test2">赋值张三(value方式)</button>
<button class="btn" id="demo1-test3">追加赋值李四</button>
<br/><br/>
<button class="btn" id="demo1-test4">清除李四</button>
<button class="btn" id="demo1-test5">清空</button>
<pre id="demo1-result"></pre><script>
var demo1 = xmSelect.render({el: '#demo1', data: [{name: '张三', value: 1},{name: '李四', value: 2},{name: '王五', value: 3},]
})document.getElementById('demo1-test1').onclick = function(){demo1.setValue([{name: '张三', value: 1},])
};document.getElementById('demo1-test2').onclick = function(){demo1.setValue([ 1 ])
};document.getElementById('demo1-test3').onclick = function(){demo1.append([ 2 ]);
};document.getElementById('demo1-test4').onclick = function(){demo1.delete([ 2 ])
};document.getElementById('demo1-test5').onclick = function(){demo1.setValue([ ])
};</script>

取值

<div id="demo2" class="xm-select-demo"></div>
<button class="btn" id="demo2-getValue">获取选中值</button><br/><br/><button class="btn" id="name">获取name数组</button>
<button class="btn" id="nameStr">获取name字符串</button>
<button class="btn" id="value">获取value数组</button>
<button class="btn" id="valueStr">获取value字符串</button><pre id="demo2-value"></pre><script>
var demo2 = xmSelect.render({el: '#demo2', data: [{name: '张三', value: 1},{name: '李四', value: 2},{name: '王五', value: 3},]
})document.getElementById('demo2-getValue').onclick = function(){//获取当前多选选中的值var selectArr = demo2.getValue();document.getElementById('demo2-value').innerHTML = `\ndemo2.getValue()\n\n` + JSON.stringify(selectArr, null, 2);
}var types = ['name', 'nameStr', 'value', 'valueStr'];
types.forEach(function(type){document.getElementById(type).onclick = function(){//获取当前多选选中的值var selectArr = demo2.getValue(type);document.getElementById('demo2-value').innerHTML = `\ndemo2.getValue('${type}')\n\n` + JSON.stringify(selectArr, null, 2);}
});</script>

说明：此文档说明不全，可参考具体说明文档：https://maplemei.gitee.io/xm-select/