layui封装的省市区三级联动插件

这个插件使用非常简单，下载好相应的框架文件，拿来即用即可

插件使用展示：

插件下载地址：http://www.jpw.net/code/636431820895762098

使用方法在下载地址有具体的展示，下面只是对它的使用总结

使用步骤：

  • 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代码

<script type="text/javascript">
        var defaults = {
            s1: 'provid',
            s2: 'cityid',
            s3: 'areaid',
            v1: null,
            v2: null,
            v3: null
        };
 
</script>

最后在页面引入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>

效果展示：

版权声明：本文为qq_38763540原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。