聯(lián)動(dòng)下拉框可以滿足省市區(qū)級(jí)聯(lián)或者多級(jí)級(jí)聯(lián)異步加載數(shù)據(jù)操作捆探。
演示地址：http://fslayui.itcto.cn
特殊說(shuō)明
聯(lián)動(dòng)下拉框依賴
數(shù)據(jù)字典，必須在layui.js后面引入數(shù)據(jù)字典文件/plugins/frame/js/fsDict.js,數(shù)據(jù)字典使用說(shuō)明
<script type="text/javascript" src="/plugins/frame/js/fsDict.js?v=1.4.0"></script>
聯(lián)動(dòng)下拉框配置
聯(lián)動(dòng)下拉框主要在
select中配置特定的標(biāo)簽斤吐，達(dá)到聯(lián)動(dòng)效果搔涝。
使用說(shuō)明：
- select必須配置樣式
fsSelect - 聯(lián)動(dòng)下拉框必須配置事件監(jiān)聽(tīng)器
lay-filter和子選擇器childrenSelectId - 聯(lián)動(dòng)下拉框除了第一級(jí)別的需要自動(dòng)加載，其他的二級(jí)以下的需要點(diǎn)擊上級(jí)才需要加載曲初，第二級(jí)以下的需要配置
isLoad="0" - 配置數(shù)據(jù)字典屬性
dict体谒，數(shù)據(jù)字典使用說(shuō)明
聯(lián)動(dòng)下拉框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">區(qū)</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和數(shù)據(jù)字典屬性dict，數(shù)據(jù)字典使用說(shuō)明
<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>
配置說(shuō)明
| 屬性 | 必輸 | 默認(rèn)值 | 名稱 | 描述 |
|---|---|---|---|---|
| id | 是 | 選擇器id | 唯一id | |
| lay-filter | 否 | 事件過(guò)濾器 | 聯(lián)動(dòng)下拉框必須配置臼婆，點(diǎn)擊事件處理 | |
| class | 是 | 樣式 | 下拉框異步加載必須有fsSelect樣式 |
|
| isLoad | 否 | 1 | 是否自動(dòng)加載 | 默認(rèn)自動(dòng)加載抒痒，只有增加fsSelect才有效，1：加載颁褂；0：不加載 |
| addNull | 否 | 是否追加空值 | ||
| dict | 是 | 字典屬性 | 數(shù)據(jù)字典信息 | |
| childrenSelectId | 否 | 子選擇性id | 聯(lián)動(dòng)下拉框使用故响，用于配置點(diǎn)擊后，需要加載的子select |
本文首發(fā)于我的博客：ITCTO技術(shù)博客
