您的位置：首页 > 产品设计 > UI/UE

分享layui省市区三级联动插件-拿来即用

2020-08-24 14:01 302 查看


插件下载地址：链接：https://pan.baidu.com/s/1DzsgPdr5AhN1GqFrnGycOA
提取码：t6wf

使用方法在下载地址有具体的展示，下面只是对它的使用总结
使用步骤：
1.下载layui，在页面引入layui.css和layui.js（官网下载地址：https://www.layui.com/）
2.下载jquery，在页面引入（下载地址：https://jquery.com/download/）
3.下载上面的插件解压（你也可以直接用它里面的layui，不过它里面的layui只适用这个插件，不是完整版的layui）

4.在页面引入assets文件下的data.js(省市区数据)和province.js(方法文件)

<script src="assets/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="assets/data.js"></script>
<script type="text/javascript" src="assets/province.js"></script>

然后，在页面添加js代码

最后在页面引入layui的html代码

<div class="layui-form-item">
<label class="layui-form-label">选择地区</label>
<div class="layui-input-inline">
<select name="provid" id="provid" lay-filter="provid">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="cityid" id="cityid" lay-filter="cityid">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline">
<select name="areaid" id="areaid" lay-filter="areaid">
<option value="">请选择县/区</option>
</select>
</div>
</div>

即可使用，下面是全部代码，使用非常简单

<!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 src="assets/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css" />
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript" src="assets/data.js"></script>
<script type="text/javascript" src="assets/province.js"></script>
<script type="text/javascript">
var defaults = {
s1: 'provid',
s2: 'cityid',
s3: 'areaid',
v1: null,
v2: null,
v3: null
};

</script>
</head>
<body>
<div style="width:800px;margin:50px auto;">
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">选择地区</label>
<div class="layui-input-inline">
<select name="provid" id="provid" lay-filter="provid">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="cityid" id="cityid" lay-filter="cityid">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline">
<select name="areaid" id="areaid" lay-filter="areaid">
<option value="">请选择县/区</option>
</select>
</div>
</div></form>
</div>
</body>
</html>

https://blog.csdn.net/qq_38763540/article/details/105415567?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航