layui-xm-select 的功能强大,可多选、可下拉树、下拉日期多选、下拉折叠面板、下拉穿梭框、级联模式。
首先在引用layui css和js 的基础上,再引用js:layui-xm-select
layui-xm-select点击下载地址
基本使用
第一步: 下载第二步: 引入 layui-xm-select.js第三步: 写一个``第四步: 渲染var demo1 = xmSelect.render({el: '#demo1',language: 'zn',data: [{name: '张三', value: 1},{name: '李四', value: 2},{name: '王五', value: 3},]})
代码案例:
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);}
默认选中值
selected是选中, disabled是禁用var demo2 = xmSelect.render({el: '#demo2', data: [{name: '水果', value: 1, selected: true, disabled: true},{name: '蔬菜', value: 2, selected: true},{name: '桌子', value: 3, disabled: true},{name: '北京', value: 4},]})
搜素值 添加 filterable: true
多选上限 max: 2var demo1 = xmSelect.render({el: '#demo1', filterable: true,max: 2,data: [{name: '水果', value: 1},{name: '蔬菜', value: 2},{name: '桌子', value: 3},{name: '北京', value: 4},]})
给多选赋值
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([ ])};
取值
var demo2 = xmSelect.render({el: '#demo2', data: [{name: '张三', value: 1},{name: '李四', value: 2},{name: '王五', value: 3},]})document.getElementById('demo2-getValue').onclick = function(){//获取当前多选选中的值var selectArr = demo2.getValue();document.getElementById('demo2-value').innerHTML = `\ndemo2.getValue()\n\n` + JSON.stringify(selectArr, null, 2);}var types = ['name', 'nameStr', 'value', 'valueStr'];types.forEach(function(type){document.getElementById(type).onclick = function(){//获取当前多选选中的值var selectArr = demo2.getValue(type);document.getElementById('demo2-value').innerHTML = `\ndemo2.getValue('${type}')\n\n` + JSON.stringify(selectArr, null, 2);}});
说明:此文档说明不全,可参考具体说明文档:https://maplemei.gitee.io/xm-select/