技術標籤：前端# layuijavascriptjquerylayui

簡介

始於 layui 的一個多選解決方案。
前身 formSelects, 由於渲染速度慢, 程式碼冗餘, 被放棄了
xm-select使用了新的開發方式, 利用preact進行渲染, 大幅度提高渲染速度, 並且可以靈活拓展

xm-select-v1.2.1 主頁資源可免費下載~

結果

遠端資料動態賦值

<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>

返回資料型別跟layui一樣

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

1.遠端資料分組多選參考 xm-select動態資料分組多選
2.更多玩法參考 xm-select