layui drop-down checkbox

Introduction

A multiple choice solution started with layui.
The predecessor formSelects, due to slow rendering speed and redundant code, was abandoned.
xm-select uses a new development method, uses preact for rendering, greatly improves rendering speed, and can be flexibly expanded

xm-select-v1.2.1 Homepage resources can be downloaded for free~

result

Remote data dynamic assignment

<script src="../static/xmSelect/xm-select.js"></script>
<div id="demo" class="xm-select-demo" style="width: 300px; margin: 20px;"></div>

<script>
		xmSelect.render({
    
    
		el: '#demo', 
		toolbar: {
    
    show: true}, // 开启清空 全选
		// 监听下拉框
		on: function (data) {
    
     
	            // arr:  当前多选已选中的数据
	            var arr = data.arr;
	            // change, 此次选择变化的数据,数组
	            var change = data.change;
	            // isAdd, 此次操作是新增还是删除
	            var isAdd = data.isAdd;
	            console.log(arr);
	        },
		data: []
	});

	 $.ajax({
    
    
	        dataType: "json",
	        type: 'get',
	        url:"https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search",
	        success: function (res) {
    
    
	            demo.update({
    
    
	                data: res.data
	            })
	        }
	   });
	
</script>

The return data type is the same as layui

	{
    
    
        "code": 0,
        "msg": "success",
        "data": [
        	{
    
    name: '张三', value: 1},
            {
    
    name: '李四', value: 2},
            {
    
    name: '王五', value: 3}
            ]
    }

1. For multiple selection of remote data grouping, please refer to xm-select for dynamic data grouping.
2. For more gameplay, please refer to xm-select