fsLayui联动下拉框使用(下拉框异步加载数据)

2024年4月11日 87次阅读 来源: FallSea

联动下拉框可以满足省市区级联或者多级级联异步加载数据操作。

演示地址：
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技术博客

    原文作者：FallSea
    原文地址: https://segmentfault.com/a/1190000012559649
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞