下拉框

常规操作

原生的html下拉框写法。

<select name="city" lay-verify="required">
  <option value=""></option>
  <option value="0">北京</option>
  <option value="1">上海</option>
  <option value="2">广州</option>
  <option value="3">深圳</option>
  <option value="4">杭州</option>
</select>

数据字典操作

[warning] 使用数据字典加载数据,统一配置样式为fsDict

特殊说明:异步下拉框依赖 数据字典

需要在select中配置css样式class="fsDict"和字典配置dict="city"addNull="1"描述增加一个空的选项

<select name="city" lay-verify="required"  lay-verType="tips" class="fsDict" dict="city" addNull="1">
</select>

联动下拉框

联动下拉框主要在select中配置特定的标签,达到联动效果。

使用说明:

  • select必须配置样式fsDict
  • 联动下拉框必须配置事件监听器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="fsDict" 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="fsDict" 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="fsDict" isLoad="0" dict="area3" addNull="1">
    </select>
  </div>
</div>

配置说明

属性 必输 默认值 名称 描述
id 选择器id 唯一id
lay-filter 事件过滤器 联动下拉框必须配置,点击事件处理
class 样式 下拉框异步加载必须有fsDict样式
isLoad 1 是否自动加载 默认自动加载,只有增加fsDict才有效,1:加载;0:不加载
addNull 0 是否追加空 是否追加空选择项,1:是,0:否
dict 字典属性 指向数据字典信息
childrenSelectId 子选择性id 联动下拉框使用,用于配置点击后,需要加载的子select
Copyright © wueasy.com 2017-2019 all right reserved,powered by Gitbook未经允许,禁止以任何形式传播 修订时间: 2018-12-02

results matching ""

    No results matching ""