使用 layarea下拉选择器，实现三级联动，方便有效。
1，页面
使用三级联动，需要一个父级标签包裹，给每个 select 分别设置为 province-selector，city-selector，county-selector，这里使用了 类选择器，用区分标签内容，也可以使用 lay-filter进行区分。
select 的 data-value设置默认值，
div class="layui-form"> <div class="layui-form-item" id="area-picker"> <form class="layui-form"> <div class="layui-form-label">选择地址</div> <div class="layui-input-inline" style="width: 200px;"> <select name="province" class="province-selector" data-value="广东省" lay-filter="province"> <option value="">请选择省</option> </select> </div> <div class="layui-input-inline" style="width: 200px;"> <select name="city" class="city-selector" data-value="深圳市" lay-filter="city"> <option value="">请选择市</option> </select> </div> <div class="layui-input-inline" style="width: 200px;"> <select name="county" class="county-selector" data-value="龙岗区" lay-filter="county"> <option value="">请选择区</option> </select> </div> </form> </div> </div>
2，js代码
需要下载layarea插件，
<script> //配置插件目录 配置数据的/mods/layarea.js layui.config({ base: ‘/mods/‘ , version: ‘1.0‘ }); // layui.use加载模块 layui.use([‘layer‘, ‘form‘, ‘layarea‘], function () { var layer = layui.layer , form = layui.form , layarea = layui.layarea; //使用模块对象 layarea.render({ elem: ‘.layui-form‘,//获得包含三级联动的form的class // change: function (res) { // //选择结果 // console.log(res); // } }); }); </script>
原文：https://www.cnblogs.com/anqiao/p/14816683.html