基于layui的select选择框修改为多选框

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/