layui多选xm-select

直接上代码

xm-select.js下载地址https://pan.baidu.com/s/1YXDsr9tn8EOeX0vEzPwGdQ?pwd=nvdv
提取码：nvdv

第一步: 下载
第二步: 引入 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: true
不可勾选 disabled: true

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

<script>
var demo1 = xmSelect.render({
	el: '#demo1', 
	toolbar:{
		show: true,
	},
	autoRow: true,
	height: '500px',
	data: [
		{name: '张三1', value: 1, selected: true},
		{name: '李四1', value: 2, selected: true},
		{name: '王五1', value: 3, disabled: true},
		{name: '苹果2', value: 4, selected: true, disabled: true},
		{name: '香蕉2', value: 5, selected: true},
		{name: '葡萄2', value: 6},
	]
})
</script>

新增

这段代码 用于修改时候，上面的赋值到xm-select，然后通过修改其他选项重新赋值给input

<script>
var motelistDataJS = <?php echo json_encode($motelist); ?>;
   var mote_select =  xmSelect.render({
        el: '#mote_select',
        filterable: true,
        radio: true, // 启用单选模式
        searchTips: '请输入中文或英文',
        data: motelistDataJS,
        on: function(data) {
  
            var values = data.arr.map(item => item.value).join(','); // 确保这一步正确获取到当前的值
            document.getElementById('mote_id').value = values;
            console.log(document.getElementById('mote_id').value); // 现在应该打印出最新的值
    
        }
    });
    
</script>