欢迎来到元素模板ys720.com,本站提供专业的织梦模板PBOOTCMS模板网站模板网站修改/网站仿站
当前位置:主页 > 程序教程 > layui教程 >
layui教程

layui采用xm-select 制作下拉框多选 下拉树

(元素模板) / 2023-01-06 09:47
layui采用xm-select 制作下拉框多选 下拉树
xm-select是 layui 的一个多选解决方案。
前身 formSelects, 由于渲染速度慢, 代码冗余, 被放弃了
xm-select使用了新的开发方式, 利用preact进行渲染, 大幅度提高渲染速度, 并且可以灵活拓展

文件下载地址

https://gitee.com/maplemei/xm-select

使用方法:

第一步: 下载
第二步: 引入 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>

  • 上一篇:没有了
  • 下一篇:layer.open()关闭事件
  • Copyright @ 2013-2021 元素模板 www.ys720.com All Rights Reserved. 版权所有 元素模板 www.ys720.com