苏州论坛型网站建设,网站建设从零到精通.pdf,厦门网站设计推广公司,做任务能赚钱的网站layui-xm-select 的功能强大#xff0c;可多选、可下拉树、下拉日期多选、下拉折叠面板、下拉穿梭框、级联模式。 首先在引用layui css和js 的基础上#xff0c;再引用js#xff1a;layui-xm-select layui-xm-select点击下载地址 基本使用
第一步: 下载
第二步: 引入 layu…layui-xm-select 的功能强大可多选、可下拉树、下拉日期多选、下拉折叠面板、下拉穿梭框、级联模式。 首先在引用layui css和js 的基础上再引用jslayui-xm-select layui-xm-select点击下载地址 基本使用
第一步: 下载
第二步: 引入 layui-xm-select.js
第三步: 写一个div iddemo1/div
第四步: 渲染var demo1 xmSelect.render({el: #demo1,language: zn,data: [{name: 张三, value: 1},{name: 李四, value: 2},{name: 王五, value: 3},]})代码案例
div iddemo1 classxm-select-demo/div
button classbtn iddemo1-getValue获取选中值/button
pre iddemo1-value/prescript
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是选中, disabled是禁用
div iddemo2 classxm-select-demo/divscript
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},]
})
/script搜素值 添加 filterable: true 多选上限 max: 2
div iddemo1 classxm-select-demo/divscript
var demo1 xmSelect.render({el: #demo1, filterable: true,max: 2,data: [{name: 水果, value: 1},{name: 蔬菜, value: 2},{name: 桌子, value: 3},{name: 北京, value: 4},]
})
/script给多选赋值
div iddemo1 classxm-select-demo/div
br/br/
button classbtn iddemo1-test1赋值张三/button
button classbtn iddemo1-test2赋值张三(value方式)/button
button classbtn iddemo1-test3追加赋值李四/button
br/br/
button classbtn iddemo1-test4清除李四/button
button classbtn iddemo1-test5清空/button
pre iddemo1-result/prescript
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([ ])
};/script取值
div iddemo2 classxm-select-demo/div
button classbtn iddemo2-getValue获取选中值/buttonbr/br/button classbtn idname获取name数组/button
button classbtn idnameStr获取name字符串/button
button classbtn idvalue获取value数组/button
button classbtn idvalueStr获取value字符串/buttonpre iddemo2-value/prescript
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);}
});/script说明此文档说明不全可参考具体说明文档https://maplemei.gitee.io/xm-select/
