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

最新推荐文章于 2024-03-08 09:52:00 发布

原创最新推荐文章于 2024-03-08 09:52:00 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layui #前端

Web前端的学习之路专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何使用layui框架中的区域选择器插件，包括HTML结构配置与JS代码调用方式，实现省市区三级联动效果。

<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文件，我上传了资源，可以下载