联动下拉框可以满足省市区级联或者多级级联异步加载数据操作。
演示地址：http://fslayui.itcto.cn
特殊说明
联动下拉框依赖
数据字典，必须在layui.js后面引入数据字典文件/plugins/frame/js/fsDict.js,数据字典使用说明
<script type="text/javascript" src="/plugins/frame/js/fsDict.js?v=1.4.0"></script>
联动下拉框配置
联动下拉框主要在
select中配置特定的标签，达到联动效果。
使用说明：
- select必须配置样式
fsSelect - 联动下拉框必须配置事件监听器
lay-filter和子选择器childrenSelectId - 联动下拉框除了第一级别的需要自动加载，其他的二级以下的需要点击上级才需要加载，第二级以下的需要配置
isLoad="0" - 配置数据字典属性
dict，数据字典使用说明
联动下拉框demo
<div class="layui-form-item">
<label class="layui-form-label">省份</label>
<div class="layui-input-inline" style="width: 100px;">
<select name="area1" lay-filter="xxxxxx1" class="fsSelect" dict="area1" addNull="1" childrenSelectId="xxxxxx2">
</select>
</div>
<label class="layui-form-label">城市</label>
<div class="layui-input-inline" style="width: 100px;">
<select id="xxxxxx2" name="area2" lay-filter="xxxxxx2" class="fsSelect" isLoad="0" dict="area2" addNull="1" childrenSelectId="xxxxxx3">
</select>
</div>
<label class="layui-form-label">区</label>
<div class="layui-input-inline" style="width: 100px;">
<select id="xxxxxx3" name="area3" class="fsSelect" isLoad="0" dict="area3" addNull="1">
</select>
</div>
</div>
普通下拉框demo
普通的下拉框只需要配置样式
fsSelect和数据字典属性dict，数据字典使用说明
<div class="layui-form-item">
<label class="layui-form-label">省份</label>
<div class="layui-input-inline" style="width: 100px;">
<select name="area1" class="fsSelect" dict="area1" addNull="1">
</select>
</div>
</div>
配置说明
| 属性 | 必输 | 默认值 | 名称 | 描述 |
|---|---|---|---|---|
| id | 是 | 选择器id | 唯一id | |
| lay-filter | 否 | 事件过滤器 | 联动下拉框必须配置，点击事件处理 | |
| class | 是 | 样式 | 下拉框异步加载必须有fsSelect样式 |
|
| isLoad | 否 | 1 | 是否自动加载 | 默认自动加载，只有增加fsSelect才有效，1：加载；0：不加载 |
| addNull | 否 | 是否追加空值 | ||
| dict | 是 | 字典属性 | 数据字典信息 | |
| childrenSelectId | 否 | 子选择性id | 联动下拉框使用，用于配置点击后，需要加载的子select |
本文首发于我的博客：ITCTO技术博客
