LayUi-前台使用省市区三联动代码

关注

原创最新推荐文章于 2026-08-14 09:17:14 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

使用layui实现省市区及编码联动(引入第三方插件) 首先看下效果图一、下载js插件，百度网盘链接：https://pan.baidu.com/s/1SPN1GW0Y5rGBVq4fIPUDIw 提取码：z578 一、在相关路径下存放 layarea.js 插件，下图是我的存放路径二、html页面   <f... 阅读详情

<div class="layui-form-item" id="area-picker">
            <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-1">
                <option value="">请选择省</option>
              </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
              <select name="city" class="city-selector" data-value="北京市" lay-filter="city-1">
                <option value="">请选择市</option>
              </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
              <select name="county" class="county-selector" data-value="东城区" lay-filter="county-1">
                <option value="">请选择区</option>
              </select>
            </div>
          </div>

js代码

<script>
//Demo
  

layui.config({
    base: '改成自己的路径/layui/mods/'
    , version: '1.0'
});
layui.use(['form','layarea'], function(){
  
var $ = layui.jquery,
  form = layui.form
, layarea = layui.layarea;
  layarea.render({
        elem: '#area-picker',
       
        change: function (res) {
            
         
           
        }
    });


  
  
});
  

</script>

mods文件，我上传了资源，可以下载

收录于