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

最新推荐文章于 2024-06-29 20:07:33 发布

大雪压青松-青松挺且直

最新推荐文章于 2024-06-29 20:07:33 发布

阅读量1.1k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/m0_37678467/article/details/108197834

版权

在这里插入图片描述
插件下载地址：链接：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