layui使用及简单的三级联动实现教程
(编辑：jimmy 日期: 2024/12/23 浏览：2)
LayUI的使用
1 、引用
1、下载：官网：https://www.layui.com
2、使用方法：直接将解压好的压缩包拖拽到项目内
将以下导入到html中：
<link rel="stylesheet" href="/自己的地址/./layui/css/layui.css" rel="external nofollow" media="all"> <script type="text/javascript" src="/UploadFiles/2021-04-02/layui.js">2、输出： hello world
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-3.0.0.min.js">3、基于layui三级联动
html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>基于 Layui form 组件的省市区联动选择的实现</title> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-3.0.0.min.js">province.js var defaults = { s1: 'provid', s2: 'cityid', s3: 'areaid', v1: null, v2: null, v3: null }; var $form; var form; var $; layui.define(['jquery', 'form'], function () { $ = layui.jquery; form = layui.form; $form = $('form'); treeSelect(defaults); }); function treeSelect(config) { config.v1 = config.v1 ""); config.v1 = data.value ""); config.v2 = data.value "<option>").text(k).val(v); if (v == d) { $opt.attr("selected", "selected") } $opt.appendTo($o); } } ======================================================================================= data数据 var threeSelectData={"北京":{val:"110000",items:{"北京":{val:"110100",items:{"东城区":"110101","西城区":"110102","崇文区":"110103","宣武区":"110104","朝阳区":"110105","丰台区":"110106","石景山区":"110107","海淀区":"110108","门头沟区":"110109","房山区":"110111","通州区":"110112","顺义区":"110113","昌平区":"110114","大兴区":"110115","怀柔区":"110116","平谷区":"110117","密云县":"110228","延庆县":"110229"}}}}总结
