<!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>

演示：链接
下载：链接
来源：http://www.jpw.net/code/636431820895762098