Skip to content
On this page

重复选

开启重复选

html
<div id="demo1" class="xm-select-demo"></div>

<script>
var demo1 = xmSelect.render({
	el: '#demo1', 
	repeat: true,
	data: [
		{name: '张三', value: 1},
		{name: '李四', value: 2},
		{name: '王五', value: 3},
	]
})
</script>

重复选完关闭下拉

html
<div id="demo2" class="xm-select-demo"></div>

<script>
var demo2 = xmSelect.render({
	el: '#demo2', 
	repeat: true,
	clickClose: true,
	data: [
		{name: '张三', value: 1},
		{name: '李四', value: 2},
		{name: '王五', value: 3},
	]
})
</script>

更换显示方式

好像这样只能增不能减了~~ 有待完善

html
<div id="demo3" class="xm-select-demo"></div>

<script>
var demo3 = xmSelect.render({
	el: '#demo3', 
	repeat: true,
	model: {
		label: {
			type: 'count',
			count: {
				template: function(data, sels){
					var res = {};
					sels.forEach(item => {
					   var name = item.name; 
					   !res[name] && (res[name] = 0);
					   res[name] += 1;
					});
					return Object.keys(res).map(key => {
						return `${key} (${res[key]})`
					}).join(',');
				}
			},
		}
	},
	data: [
		{name: '张三', value: 1},
		{name: '李四', value: 2},
		{name: '王五', value: 3},
	]
})
</script>