layui 第三方组件平台

返回首页 发布组件

本插件适用于多级select元素联动选择,包括不限于“多级地区联动”,“多级类型联动”等。select元素值改变后,刷新目标元素数据。 注意:此插件的初衷是针对 与接口方面交互的多级联动,因此 数据应来源于接口,而不是…某些组件中 硬写在JS中的…一堆XX数据…然后遍历几万条数据找子集… 脑壳痛……所以才有此组件的诞生。 具体……不用多说……

创建:2020-2-24

文档

Html配置:
1.select元素 配置 lay-filter="selectMore"
2.data-target 指向需要联动的下级目标(没有下级则无需配置)
……over

HTML示例:
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
<div class="layui-row">
<div class="layui-col-md12">
<div class="layui-inline layui-show-xs-block">
<select lay-filter="selectMore" id="demo-area-first" data-target="#demo-area-sec"></select>
</div>
<div class="layui-inline layui-show-xs-block">
<select lay-filter="selectMore" id="demo-area-sec" data-target="#demo-area-th"></select>
</div>
<div class="layui-inline layui-show-xs-block">
<select lay-filter="selectMore" id="demo-area-th"></select>
</div>
</div>
</div>
</div>

JS中的应用:

初始化:layui.selectMore.init(layui.$("#demo-area-first"));
配置多个默认值:layui.selectMore.setAll(['130000','130200','130204']);
独立设置某值:layui.selectMore.set("#demo-area-first",'130000');

JS示例:
layui.config({
base: '../../../layui_exts/'
}).extend({
selectMore: 'selectMore/selectMore'
}).use(['selectMore'], function(){

setTimeout(function(){
// 初始化
// layui.selectMore.init(layui.$("#demo-area-first"));

// 设置多个值
// layui.selectMore.setAll(['130000','130200','130204']);

// 独立设置值
// layui.selectMore.set("#demo-area-first",'130000');
},1500); // 此处的延迟执行 是属于任性的作者的强行写入 哈哈 随意删……

});
So easy……

其他配置说明在文件中有注释
const selectMoreConfig = {
"url":"./demo.json", // ajax请求地址
"option_value_key":"areaId", // option配置中 value取值的key 例如:<option value="areaId"></option>
"option_text_key":"name", // option配置中 text取值的key 例如:<option value="areaId"></option>
"params_pid_key":"parentId", // ajax查询目标ID下 子集的参数名 例如:params:{"parentId":1}
"params_pid_def":0, // 初始化第一级数据时 默认参数值
}