完善layui-select功能与文档
This commit is contained in:
parent
afaa364499
commit
277cfb2e11
@ -0,0 +1,214 @@
|
|||||||
|
function LayuiSelect(layui) {
|
||||||
|
let $ = layui.$;
|
||||||
|
let form = layui.form;
|
||||||
|
let ajax = top.restAjax;
|
||||||
|
let dialog = top.dialog;
|
||||||
|
let layuiSelectSelf = this;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 下拉选择
|
||||||
|
*/
|
||||||
|
this.select = function (opt) {
|
||||||
|
let self = this;
|
||||||
|
let url = opt.url;
|
||||||
|
let domId = opt.domId;
|
||||||
|
let name = opt.name;
|
||||||
|
let valueKey = opt.valueKey;
|
||||||
|
let nameKey = opt.nameKey;
|
||||||
|
let dataForm = opt.dataForm;
|
||||||
|
let required = opt.required;
|
||||||
|
let selectedValue = opt.selectedValue;
|
||||||
|
let optionDataKeyArray = opt.optionDataKeyArray ? opt.optionDataKeyArray : [];
|
||||||
|
let onInit = opt.onInit;
|
||||||
|
let onSelect = opt.onSelect;
|
||||||
|
|
||||||
|
$('#' + domId).empty();
|
||||||
|
$('#' + domId).append(`<select id="${name}" name="${name}" lay-filter="${name}Filter" ${required ? 'lay-verify="required"' : ''}></select>`);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 初始化选项
|
||||||
|
*/
|
||||||
|
function initOption() {
|
||||||
|
$('#' + name).empty();
|
||||||
|
ajax.get(url, {}, null, function (code, data) {
|
||||||
|
let options = '<option value="">请选择</option>';
|
||||||
|
$.each(data, function (i, item) {
|
||||||
|
let optionDatas = '';
|
||||||
|
$.each(optionDataKeyArray, function (j, optionDataKey) {
|
||||||
|
let optionDataValue = item[optionDataKey];
|
||||||
|
if (!optionDataValue) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
optionDatas += ` data-data${j}="${item[optionDataKey]}"`;
|
||||||
|
});
|
||||||
|
options += `<option value="${item[valueKey]}" ${(selectedValue && selectedValue === item[valueKey]) ? 'selected' : ''} ${optionDatas}>${item[nameKey]}</option>`
|
||||||
|
})
|
||||||
|
$('#' + name).append(options)
|
||||||
|
form.render(null, dataForm);
|
||||||
|
|
||||||
|
if (selectedValue) {
|
||||||
|
// 监听初始化
|
||||||
|
onInit ? onInit(selectedValue, layuiSelectSelf.selectedOption('#' + name, selectedValue)) : null;
|
||||||
|
}
|
||||||
|
}, function (code, data) {
|
||||||
|
dialog.msg(data.msg);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 初始化选择
|
||||||
|
*/
|
||||||
|
function initSelectEvent() {
|
||||||
|
form.on('select(' + name + 'Filter)', function (data) {
|
||||||
|
let option = self.selectedOption('#' + name, data.value);
|
||||||
|
onSelect ? onSelect(data, option) : null;
|
||||||
|
// 联动
|
||||||
|
if (data.value) {
|
||||||
|
onInit ? onInit(data.value) : null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
initOption();
|
||||||
|
initSelectEvent();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 下拉数据字典
|
||||||
|
* @param opt
|
||||||
|
*/
|
||||||
|
this.selectData = function (opt) {
|
||||||
|
this.select({
|
||||||
|
url: ajax.path('api/data/listbyparentid/{parentId}', [opt.parentId]),
|
||||||
|
domId: opt.domId,
|
||||||
|
name: opt.name,
|
||||||
|
required: opt.required,
|
||||||
|
dataForm: opt.dataForm,
|
||||||
|
valueKey: 'dataId',
|
||||||
|
nameKey: 'dataName',
|
||||||
|
selectedValue: opt.selectedValue,
|
||||||
|
optionDataKeyArray: opt.optionDataKeyArray,
|
||||||
|
onInit: opt.onInit,
|
||||||
|
onSelect: opt.onSelect
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取选择的option
|
||||||
|
*
|
||||||
|
* @param selectId 下拉框ID
|
||||||
|
* @param selectedValue 选择的值
|
||||||
|
* @return {DOMStringMap|null}
|
||||||
|
*/
|
||||||
|
this.selectedOption = function (selectId, selectedValue) {
|
||||||
|
let options = $(selectId).children();
|
||||||
|
for (let i = 0, option; option = options[i++];) {
|
||||||
|
if (selectedValue === option.value) {
|
||||||
|
return option;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 级联下拉
|
||||||
|
* @param opt
|
||||||
|
*/
|
||||||
|
this.selectLinkage = function (opt) {
|
||||||
|
let self = this;
|
||||||
|
// 级联url
|
||||||
|
let url = opt.url;
|
||||||
|
// option key
|
||||||
|
let valueKey = opt.valueKey;
|
||||||
|
// option text key
|
||||||
|
let nameKey = opt.nameKey;
|
||||||
|
let optionDataKeyArray = opt.optionDataKeyArray && (opt.optionDataKeyArray instanceof Array) ? opt.optionDataKeyArray : [];
|
||||||
|
// 级联数量
|
||||||
|
let linkageSize = opt.linkageSize ? opt.linkageSize : 1;
|
||||||
|
// 选择ID
|
||||||
|
let selectId = opt.selectId;
|
||||||
|
let baseRootId = opt.baseRootId;
|
||||||
|
let onSelect = opt.onSelect && typeof (opt.onSelect) === 'function' ? opt.onSelect : null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 初始化
|
||||||
|
* @param parentId 上级ID
|
||||||
|
* @param selectIndex 选择下标
|
||||||
|
*/
|
||||||
|
function initSelect(parentId, selectIndex) {
|
||||||
|
if (parentId === '') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let refreshSelectId = (selectId + parseInt(selectIndex));
|
||||||
|
ajax.get(ajax.path(url, [parentId]), {}, null, function (code, data) {
|
||||||
|
$('#' + refreshSelectId).append('<option value="">请选择</option>');
|
||||||
|
$.each(data, function (index, item) {
|
||||||
|
// option携带的值
|
||||||
|
let optionDatas = '';
|
||||||
|
for (let i = 0, optionDataKey; optionDataKey = optionDataKeyArray[i++];) {
|
||||||
|
let optionDataValue = item[optionDataKey];
|
||||||
|
if (!optionDataValue) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
optionDatas += ` data-data${i}="${item[optionDataKey]}"`;
|
||||||
|
}
|
||||||
|
$('#' + refreshSelectId).append(`<option value="${item[valueKey]}"${optionDatas}>${item[nameKey]}</option>`);
|
||||||
|
});
|
||||||
|
// 渲染表单下拉框
|
||||||
|
form.render('select');
|
||||||
|
}, function (code, data) {
|
||||||
|
dialog.msg(data.msg);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 初始化级联事件
|
||||||
|
* @param selectId 选择ID
|
||||||
|
* @param size 级联长度
|
||||||
|
*/
|
||||||
|
function addLinkageEvent() {
|
||||||
|
for (let i = 0; i < linkageSize; i++) {
|
||||||
|
form.on('select(' + (selectId + i) + 'Select)', function (data) {
|
||||||
|
let index = parseInt(data.elem.id.replace(selectId, ''));
|
||||||
|
let nextIndex = index + 1;
|
||||||
|
// 级联清空
|
||||||
|
for (let j = nextIndex; j < linkageSize; j++) {
|
||||||
|
$('#' + (selectId + j)).empty();
|
||||||
|
}
|
||||||
|
form.render('select');
|
||||||
|
// 最后一个不触发初始化事件
|
||||||
|
if (index < (linkageSize - 1)) {
|
||||||
|
initSelect(data.value, nextIndex);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (onSelect) {
|
||||||
|
let option = self.selectedOption('#' + data.elem.id, data.value);
|
||||||
|
onSelect(data, option, index);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
initSelect(baseRootId, 0);
|
||||||
|
addLinkageEvent();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 地区级联下拉
|
||||||
|
* @param opt
|
||||||
|
*/
|
||||||
|
this.selectLinkageArea = function (opt) {
|
||||||
|
this.selectLinkage({
|
||||||
|
url: 'api/area/listbyparentid/{parentId}',
|
||||||
|
valueKey: 'areaId',
|
||||||
|
nameKey: 'areaName',
|
||||||
|
linkageSize: opt.linkageSize ? opt.linkageSize : 5,
|
||||||
|
baseRootId: opt.baseRootId,
|
||||||
|
selectId: opt.selectId,
|
||||||
|
optionDataKeyArray: opt.optionDataKeyArray,
|
||||||
|
onSelect: opt.onSelect && typeof (opt.onSelect) === 'function' ? opt.onSelect : null
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
14
docs/pom.xml
Normal file
14
docs/pom.xml
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project xmlns="http://maven.apache.org/POM/4.0.0"
|
||||||
|
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||||
|
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
|
||||||
|
<parent>
|
||||||
|
<artifactId>wg-basic</artifactId>
|
||||||
|
<groupId>ink.wgink</groupId>
|
||||||
|
<version>1.0-SNAPSHOT</version>
|
||||||
|
</parent>
|
||||||
|
<modelVersion>4.0.0</modelVersion>
|
||||||
|
|
||||||
|
<artifactId>docs</artifactId>
|
||||||
|
|
||||||
|
</project>
|
||||||
@ -0,0 +1,173 @@
|
|||||||
|
# 输入框树形选择
|
||||||
|
|
||||||
|
layui需要引入 **ztree** 模块
|
||||||
|
|
||||||
|
js
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="assets/js/common/layui-input-tree.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
初始化
|
||||||
|
|
||||||
|
```js
|
||||||
|
var layuiInputTree = new LayuiInputTree(layui);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 渲染
|
||||||
|
|
||||||
|
### 单选
|
||||||
|
|
||||||
|
html
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="hidden" id="roleId">
|
||||||
|
<input type="text" id="roleName" class="layui-input" placeholder="勾选角色">
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
js
|
||||||
|
|
||||||
|
```js
|
||||||
|
layuiInputTree.initSelect({
|
||||||
|
id: 'roleName',
|
||||||
|
url: 'api/role/listztree',
|
||||||
|
key: {
|
||||||
|
id: 'roleId',
|
||||||
|
name: 'roleName',
|
||||||
|
title: 'roleName',
|
||||||
|
pId: 'roleParentId',
|
||||||
|
checked: 'checked',
|
||||||
|
children: 'subs',
|
||||||
|
isParent: 'isParent',
|
||||||
|
isHidden: 'isHidden',
|
||||||
|
url: 'url',
|
||||||
|
},
|
||||||
|
defaultParams: {id: '123123'},
|
||||||
|
selectedData: {id: '', name: ''},
|
||||||
|
onConfirm: function(zTree, selectedNode) {
|
||||||
|
if(!selectedNode) {
|
||||||
|
$('#roleId').val('');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$('#roleId').val(selectedNode.id);
|
||||||
|
},
|
||||||
|
onClear: function(zTree) {}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
参数
|
||||||
|
|
||||||
|
|名称|类型|描述|是否必填|
|
||||||
|
|---|---|---|---|
|
||||||
|
|url|string|请求地址|是|
|
||||||
|
|id|string|触发选择的input输入框ID|是|
|
||||||
|
|key|obj|返回列表对象与ztree节点匹配的字段。id:节点id；name:名称；title:标题，pId:上级ID；checked:是否选中；isParent:是否父节点；isHidden：是否隐藏；url:节点链接。以上属性均为非必填|否|
|
||||||
|
|defaultParams|obj|请求默认携带的参数|否|
|
||||||
|
|getSelectedData|function|返回已经选择的数据|否|
|
||||||
|
|onConfirm|function|点击确定按钮后触发|否|
|
||||||
|
|onClear|function|点击清除按钮后触发|否|
|
||||||
|
|
||||||
|
方法
|
||||||
|
|
||||||
|
getSelectedData：返回ztree回显时的数据
|
||||||
|
|
||||||
|
事件
|
||||||
|
|
||||||
|
onConfirm：树形列表点击确定按钮后触发
|
||||||
|
|
||||||
|
|名称|类型| 描述 |
|
||||||
|
|---|---|---------|
|
||||||
|
|zTree|obj| ztree对象 |
|
||||||
|
|selectedNode|obj| 选择的节点 |
|
||||||
|
|
||||||
|
onClear：树形列表点击清空按钮后触发
|
||||||
|
|
||||||
|
|名称|类型| 描述 |
|
||||||
|
|---|---|---------|
|
||||||
|
|zTree|obj| ztree对象 |
|
||||||
|
|
||||||
|
### 多选
|
||||||
|
|
||||||
|
html
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="hidden" id="roleIds">
|
||||||
|
<input type="text" id="roleNames" class="layui-input" placeholder="勾选角色">
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
js
|
||||||
|
|
||||||
|
```js
|
||||||
|
var selectedRoles = [{id:'', name:''}]
|
||||||
|
layuiInputTree.initMultiSelect({
|
||||||
|
id: 'roleNames',
|
||||||
|
url: 'api/role/listztree',
|
||||||
|
key: {
|
||||||
|
id: 'roleId',
|
||||||
|
name: 'roleName',
|
||||||
|
title: 'roleName',
|
||||||
|
pId: 'roleParentId',
|
||||||
|
checked: 'checked',
|
||||||
|
children: 'subs',
|
||||||
|
isParent: 'isParent',
|
||||||
|
isHidden: 'isHidden',
|
||||||
|
url: 'url',
|
||||||
|
},
|
||||||
|
checkboxType: {Y: '', N: ''},
|
||||||
|
defaultParams: {id: '123123'},
|
||||||
|
getSelectedDatas: function() {
|
||||||
|
return [{id:'', name:''}]
|
||||||
|
},
|
||||||
|
onConfirm: function (zTree, selectedNodes) {
|
||||||
|
// 将返回结果保存，回显时用
|
||||||
|
if (selectedNodes.length == 0) {
|
||||||
|
$('#roleIds').val('');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var roleIds = '';
|
||||||
|
$.each(selectedNodes, function (index, item) {
|
||||||
|
if (roleIds != '') {
|
||||||
|
roleIds += ',';
|
||||||
|
}
|
||||||
|
roleIds += item.id;
|
||||||
|
})
|
||||||
|
$('#roleIds').val(roleIds);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
参数
|
||||||
|
|
||||||
|
|名称|类型|描述| 是否必填 |
|
||||||
|
|---|---|---|------|
|
||||||
|
|url|string|请求地址| 是 |
|
||||||
|
|id|string|触发选择的input输入框ID| 是 |
|
||||||
|
|key|obj|返回列表对象与ztree节点匹配的字段。id:节点id；name:名称；title:标题，pId:上级ID；checked:是否选中；isParent:是否父节点；isHidden：是否隐藏；url:节点链接。以上属性均为非必填| 否 |
|
||||||
|
|checkboxType|obj|复选框类型，Y 属性定义 checkbox 被勾选后的情况；N 属性定义 checkbox 取消勾选后的情况；"p" 表示作会影响父级节点；"s" 表示操作会影响子级节点。默认均为"ps"| 否 |
|
||||||
|
|defaultParams|obj|请求默认携带的参数| 否 |
|
||||||
|
|getSelectedDatas|function|返回已经选择的数据列表| 否 |
|
||||||
|
|onConfirm|function|点击确定按钮后触发| 否 |
|
||||||
|
|onClear|function|点击清除按钮后触发| 否 |
|
||||||
|
|
||||||
|
方法
|
||||||
|
|
||||||
|
getSelectedDatas：返回ztree回显时的数据列表
|
||||||
|
|
||||||
|
事件
|
||||||
|
|
||||||
|
onConfirm：树形列表点击确定按钮后触发
|
||||||
|
|
||||||
|
|名称|类型| 描述 |
|
||||||
|
|---|---|-----------|
|
||||||
|
|zTree|obj| ztree对象 |
|
||||||
|
|selectedNodes|array| 触发选择的节点列表 |
|
||||||
|
|
||||||
|
onClear：树形列表点击清空按钮后触发
|
||||||
|
|
||||||
|
|名称|类型| 描述 |
|
||||||
|
|---|---|---------|
|
||||||
|
|zTree|obj| ztree对象 |
|
||||||
@ -0,0 +1,198 @@
|
|||||||
|
# 下拉选择
|
||||||
|
|
||||||
|
## 静态
|
||||||
|
|
||||||
|
### 表单
|
||||||
|
|
||||||
|
```html
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label"></label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<select id="selector" name="selector" lay-filter="selectorSelect">
|
||||||
|
<option value="">选择类型</option>
|
||||||
|
<option value="type1">类型1</option>
|
||||||
|
<option value="type2">类型2</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 列表搜索
|
||||||
|
|
||||||
|
```html
|
||||||
|
|
||||||
|
<div class="layui-inline layui-form search-item">
|
||||||
|
<select id="type" name="type" lay-filter="typeFilter">
|
||||||
|
<option value="">选择类型</option>
|
||||||
|
<option value="type1">类型1</option>
|
||||||
|
<option value="type2">类型2</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 动态
|
||||||
|
|
||||||
|
js
|
||||||
|
|
||||||
|
```js
|
||||||
|
<script src="assets/js/common/layui-select.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
初始化
|
||||||
|
|
||||||
|
```js
|
||||||
|
var layuiSelect = new LayuiSelect(layui);
|
||||||
|
```
|
||||||
|
|
||||||
|
### 单下拉
|
||||||
|
|
||||||
|
#### 通用
|
||||||
|
|
||||||
|
html
|
||||||
|
|
||||||
|
```html
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">最高学历</label>
|
||||||
|
<input type="hidden" id="xxxName" name="xxxName">
|
||||||
|
<div class="layui-input-block" id="xxxIdBox"></div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
js
|
||||||
|
|
||||||
|
```js
|
||||||
|
layuiSelect.select({
|
||||||
|
url: top.restAjax.path('', []),
|
||||||
|
domId: 'xxxIdBox',
|
||||||
|
name: 'xxxId',
|
||||||
|
required: true,
|
||||||
|
dataForm: 'dataForm',
|
||||||
|
valueKey: 'dataId',
|
||||||
|
nameKey: 'dataName',
|
||||||
|
onSelect: function (data, option) {
|
||||||
|
var optionValue = option.value;
|
||||||
|
var optionText = option.innerText;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
> xxx为需要替换的名称
|
||||||
|
|
||||||
|
#### 数据字典
|
||||||
|
|
||||||
|
js
|
||||||
|
|
||||||
|
```js
|
||||||
|
layuiSelect.selectData({
|
||||||
|
parentId: '',
|
||||||
|
domId: 'xxxIdBox',
|
||||||
|
name: 'xxxId',
|
||||||
|
required: true,
|
||||||
|
dataForm: 'dataForm',
|
||||||
|
onSelect: function (data, option) {
|
||||||
|
$('#xxxName').val(option.innerText);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
参数
|
||||||
|
|
||||||
|
|名称| 类型 | 描述 | 是否必填 |
|
||||||
|
|---|----------|----------------------------------------------------------|------|
|
||||||
|
|url| string | 请求地址 | 是 |
|
||||||
|
|domId| string | 加载下拉的div | 是 |
|
||||||
|
|name| string | select的ID与NAME属性值 | 是 |
|
||||||
|
|required| boolean | 是否校验 | 否 |
|
||||||
|
|dataForm| string | 表单的lay-filter值 | 是 |
|
||||||
|
|valueKey| string | 接口返回的数据渲染到option的value属性的值 | 是 |
|
||||||
|
|nameKey| string | 接口返回的数据渲染到option的innerText的值 | 是 |
|
||||||
|
|selectedValue| string | 选中的默认值 | 否 |
|
||||||
|
|optionDataKeyArray| array | 需要附带在option上的属性值，取值的时候通过option.dataset.dataX 获取，其中X为数组下标 | 否 |
|
||||||
|
|onInit| function | 渲染时触发回调 | 否 |
|
||||||
|
|onSelect| function | 选择时触发回调 | 否 |
|
||||||
|
|
||||||
|
事件
|
||||||
|
|
||||||
|
onInit：渲染或更新时触发事件
|
||||||
|
|
||||||
|
|名称| 类型 | 描述 |
|
||||||
|
|---|--------|----------------------|
|
||||||
|
|selectedValue| string | 选中的默认值，空字符串时，不触发数据加载 |
|
||||||
|
|option| dom | 默认选中的option |
|
||||||
|
|
||||||
|
onSelect：选择时触发事件
|
||||||
|
|
||||||
|
|名称|类型| 描述 |
|
||||||
|
|---|---|----------------------------------|
|
||||||
|
|data|obj| 选择的option数据，包含原始DOM，美化后的DOM，选中的值 |
|
||||||
|
|option|dom| 选中的option |
|
||||||
|
|
||||||
|
### 下拉联动
|
||||||
|
|
||||||
|
#### 多级地区联动（示例）
|
||||||
|
|
||||||
|
> 树形结构，下拉联动需要配合dom实现
|
||||||
|
|
||||||
|
html
|
||||||
|
|
||||||
|
```html
|
||||||
|
|
||||||
|
<div class="layui-row" style="margin-top: 10px;">
|
||||||
|
<span class="search-item-key">户籍地</span>
|
||||||
|
<div class="layui-inline layui-form search-item ">
|
||||||
|
<select id="registerArea0" name="registerArea0" lay-filter="registerArea0Select"></select>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline layui-form search-item ">
|
||||||
|
<select id="registerArea1" name="registerArea1" lay-filter="registerArea1Select"></select>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline layui-form search-item ">
|
||||||
|
<select id="registerArea2" name="registerArea2" lay-filter="registerArea2Select"></select>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline layui-form search-item ">
|
||||||
|
<select id="registerArea3" name="registerArea3" lay-filter="registerArea3Select"></select>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline layui-form search-item ">
|
||||||
|
<select id="registerArea4" name="registerArea4" lay-filter="registerArea4Select"></select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
`<select>` 的 **id**、**name** 需要相同，下标从**0**开始，**lay-filter** 为 **id** 值 + **Select**。
|
||||||
|
固定写法，下标递增
|
||||||
|
|
||||||
|
```js
|
||||||
|
layuiSelect.selectLinkageArea({
|
||||||
|
baseRootId: 0,
|
||||||
|
selectId: 'registerArea',
|
||||||
|
optionDataKeyArray: ['areaCode'],
|
||||||
|
onSelect: function (data, option, index) {
|
||||||
|
var value = data.value;
|
||||||
|
// 删除元素
|
||||||
|
selectedRegisterAreaArray.splice(index, 5 - index);
|
||||||
|
if (value) {
|
||||||
|
selectedRegisterAreaArray[index] = option.innerText;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
参数
|
||||||
|
|
||||||
|
|名称|类型|描述| 是否必填 |
|
||||||
|
|---|---|---|------|
|
||||||
|
|baseRootId|string|第一个下拉框的根节点ID| 是 |
|
||||||
|
|selectId|string|select的ID（不包含下标）| 是 |
|
||||||
|
|optionDataKeyArray|array|需要附带在option上的属性值，取值的时候通过option.dataset.dataX 获取，其中X为数组下标| 否 |
|
||||||
|
|onSelect|function|选择事件| 是 |
|
||||||
|
|
||||||
|
事件
|
||||||
|
|
||||||
|
onSelect：选择时触发事件
|
||||||
|
|
||||||
|
|名称|类型| 描述 |
|
||||||
|
|---|---|----------------------------------|
|
||||||
|
|data|obj| 选择的option数据，包含原始DOM，美化后的DOM，选中的值 |
|
||||||
|
|option|dom| 选中的option |
|
||||||
|
|index|number| select下标 |
|
||||||
Loading…
Reference in New Issue
Block a user