layui运用及庞杂的3级联动告终教程

2025-10-30 04:19:44 1

这篇文章主要给大家介绍了关于layui使用及简单的三级联动的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

LayUI的使用

1 、引用

1、下载：官网：https://www.layui.com

2、使用方法：直接将解压好的压缩包拖拽到项目内

将以下导入到html中：

2、输出：hello world

<ｓｃｒｉｐｔ type="text/javascript" src="./jquery-3.0.0/jquery-3.0.0.min.js"></ｓｃｒｉｐｔ>

<ｓｃｒｉｐｔ type="text/javascript" src="../day/layui/css/layui.css"></ｓｃｒｉｐｔ>
<ｓｃｒｉｐｔ type="text/javascript" src="../day/layui/layui.js"></ｓｃｒｉｐｔ>

<ｓｃｒｉｐｔ type="text/javascript" src="./layui/layui.all.js"></ｓｃｒｉｐｔ>
</head>
<body>

<ｓｃｒｉｐｔ>
// layui.use(['layer', 'form'], function(){
// var layer = layui.layer
// ,form = layui.form;
// layer.msg('Hello World');
// });

$(function(){
layer.msg('Hello World');
})
</ｓｃｒｉｐｔ>

</body>
</html>

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>

<ｓｃｒｉｐｔ type="text/javascript" src="./jquery-3.0.0/jquery-3.0.0.min.js"></ｓｃｒｉｐｔ>
<link rel="stylesheet" href="layui/css/layui.css" />
<ｓｃｒｉｐｔ src="layui/css/layui.css"></ｓｃｒｉｐｔ>
<ｓｃｒｉｐｔ type="text/javascript" src="layui/layui.js"></ｓｃｒｉｐｔ>
<ｓｃｒｉｐｔ type="text/javascript" src="./data.js"></ｓｃｒｉｐｔ>
<ｓｃｒｉｐｔ type="text/javascript" src="/province.js"></ｓｃｒｉｐｔ>
<ｓｃｒｉｐｔ type="text/javascript">
var defaults = {
s1: 'provid',
s2: 'cityid',
s3: 'areaid',
v1: null,
v2: null,
v3: null
};

</ｓｃｒｉｐｔ>
</head>
<body>
<p style="width:800px;margin:50px auto;">
<form >
<p >
<label >选择地区</label>
<p >
<select name="provid"lay-filter="provid">
<option value="">请选择省</option>
</select>
</p>
<p >
<select name="cityid"lay-filter="cityid">
<option value="">请选择市</option>
</select>
</p>
<p >
<select name="areaid"lay-filter="areaid">
<option value="">请选择县/区</option>
</select>
</p>
</p>
</form>
</p>
</body>
</html>

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 : 110000;
config.v2 = config.v2 ? config.v2 : 110100;
config.v3 = config.v3 ? config.v3 : 110101;
$.each(threeSelectData, function (k, v) {
appendOptionTo($form.find('select[name=' + config.s1 + ']'), k, v.val, config.v1);
});
form.render();
cityEvent(config);
areaEvent(config);
form.on('select(' + config.s1 + ')', function (data) {
cityEvent(data);
form.on('select(' + config.s2 + ')', function (data) {
areaEvent(data);
});
});