layui select 多选 功能

https://xm-select.com/

或者

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

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <div th:include="/common/layui"></div>
    <div th:include="/common/jq"></div>
    <!-- xm-select 多选组件 -->
    <script src="/xm-select/xm-select.js"></script>

</head>
<style>
    .search-bar{ padding:10px; }
</style>
<body>
<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>

<button class="btn" id="demo1-test6">获取值</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([ ])
    };

    document.getElementById('demo1-test6').onclick = function(){
       var selectArr = demo1.getValue();
       console.log(selectArr);

    };


</script>

</body>

<script>

    layui.use(['laydate','laypage','layer','table','carousel','upload','element','form'], function() {
       var layer = layui.layer
             , table = layui.table
             , form = layui.form;


    });
</script>
</html>

xm-select.zip

值更多时的情况。

表格中的多选

<table id="demo" lay-filter="test"></table><script>layui.use('table', function() {	var table = layui.table;	//第一个实例
	table.render({		elem: '#demo',		page: true, //开启分页
		height: 500,		cols: [
			[ //表头
				{ field: 'id', title: 'ID', width: 80, sort: true }, 
				{ field: 'username', title: '用户名', width: 80 }, 
				{ field: 'sex', title: '性别', width: 80, sort: true }, 
				{ field: 'city', title: '城市', width: 80 }, 
				{ field: 'sign', title: '爱好', width: 200, templet: function(d){					return '<div id="XM-' + d.id + '" ></div>'
				} }, 
				{ field: 'experience', title: '积分', width: 80, sort: true }, 
				{ field: 'score', title: '评分', width: 80, sort: true }, 
				{ field: 'classify', title: '职业', width: 80 }, 
				{ field: 'wealth', title: '财富', width: 135, sort: true }
			]
		],		data: [
			{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},
			{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},
			{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},
			{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},
			{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},
			{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},
			{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},
			{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},
			{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},
			{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75}
		],		done: function(res){			//修改一些css样式, 这里虽然能够使用, 但是还是不太友好, 努力中...
			var cells = document.querySelectorAll('div[lay-id="demo"] .layui-table-cell');			for(var i = 0 ; i < cells.length ; i++ ){				//cells[i].style.overflow = 'unset';
				cells[i].style.height = 'auto';
			}			//渲染多选
			res.data.forEach(item =>  {				var xm = xmSelect.render({					el: '#XM-' + item.id, 
					autoRow: true,					model: { type: 'fixed' },					data: [
						{name: '张三', value: 1},
						{name: '李四', value: 2},
						{name: '王五', value: 3},
					]
				})
				
				item.__xm = xm;
			})
		}
	});

});//表格滚动时 重新计算位置document.querySelector('.layui-table-body').addEventListener('scroll', () => {
	xmSelect.get().forEach(function(item){
		item.calcPosition();
	})
})</script>

弹窗中的多选。

<button class="btn" id="demo1-btn">弹出多选</button><script>document.getElementById('demo1-btn').onclick = function(){
	layer.open({		type: 1,		title: '多选',		content: '<div id="demo1" class="xm-select-demo-alert"></div>',		success: function(layero, index){			//这里因为内容过少, 会被遮挡, 所以简单修改了下样式
			document.getElementById('layui-layer' + index).getElementsByClassName('layui-layer-content')[0].style.overflow = 'unset';			//渲染多选
			var demo1 = xmSelect.render({				el: '#demo1', 
				data: [
					{name: '张三', value: 1, selected: true},
					{name: '李四', value: 2, disabled: true},
					{name: '王五', value: 3},
				]
			})
		}
	});
}</script>