# layui_selectMore

**Repository Path**: banton/layui_selectMore

## Basic Information

- **Project Name**: layui_selectMore
- **Description**: 针对Layui 多级选择插件：

本插件适用于多级select元素联动选择，包括不限于“多级地区联动”，“多级类型联动”等。select元素值改变后，刷新目标元素数据。

注意：此插件的初衷是针对 与接口方面交互的多级联动，因此 数据应来源于接口，而不是…某些组件中 硬写在JS中的…一堆XX数据…然后遍历几万条数据找子集… 脑壳痛……所以才有此组件的诞生。
具体……不用多说……
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2022-07-27
- **Last Updated**: 2022-07-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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, // 初始化第一级数据时 默认参数值
}
```