基于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/

相关推荐
道不尽世间的沧桑1 小时前
第17篇:网络请求与Axios集成
开发语言·前端·javascript
diemeng11192 小时前
AI前端开发技能变革时代:效率与创新的新范式
前端·人工智能
bin91534 小时前
DeepSeek 助力 Vue 开发:打造丝滑的复制到剪贴板(Copy to Clipboard)
前端·javascript·vue.js·ecmascript·deepseek
晴空万里藏片云5 小时前
elment Table多级表头固定列后,合计行错位显示问题解决
前端·javascript·vue.js
曦月合一5 小时前
html中iframe标签 隐藏滚动条
前端·html·iframe
奶球不是球5 小时前
el-button按钮的loading状态设置
前端·javascript
kidding7235 小时前
前端VUE3的面试题
前端·typescript·compositionapi·fragment·teleport·suspense
无责任此方_修行中7 小时前
每周见闻分享:杂谈AI取代程序员
javascript·资讯
Σίσυφος19007 小时前
halcon 条形码、二维码识别、opencv识别
前端·数据库
学代码的小前端8 小时前
0基础学前端-----CSS DAY13
前端·css