fsLayui聯動下拉框使用(下拉框異步加載數據)

聯動下拉框能夠知足省市區級聯或者多級級聯異步加載數據操做。
演示地址： 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技術博客