layui-省市区三级级联选择框

介绍

适用于layui_2.8.x版本的省市区三级级联下来选择框模块

软件架构

基于高德行政区域查询webapi 动态获取省级下面的市和区/县信息 切换父级选择框会重置下级选择框 具备初始值赋值功能,初始赋值会动态查询下级选择框行政单位数据 模块已为级联选择框监听了select事件.请不需要再自行添加,

...否则,你去改源码吧....

安装教程

以layuiadmin pro 为例

1. 下载pca模块放置在项目/lib/extend/xxx任意目录

2. 修改项目/config.js文件

   //扩展的模块（相对于 lib/extend 目录）
   ,extend: {
     echarts: 'echarts', //第三方 echarts 核心包
     echartsTheme: 'echartsTheme', //第三方 echarts 主题
     layim: 'layim/layim-assets/layim' ,//layim
     pca: 'xxx/pca' //省地市三级联
   }

使用说明

1. html页面使用

   <div class="layui-form-item">
       <label class="layui-form-label">省市区级联</label>
       <div class="layui-input-block">
           <div class="layui-input-inline">
               <select id="province" data-type="province" name="province" lay-search="">
               </select>
           </div>
           <div class="layui-input-inline">
               <select id="city" data-type="city" name="city">
               </select>
           </div>
           <div class="layui-input-inline">
               <select id="area" data-type="area" name="district">
               </select>
           </div>
       </div>
   </div>
2. 页面脚本

   <script>
   layui.use('pca',layui.factory('pca')).use(['admin', 'pca'], function(){
       var $ = layui.$;
       //你的逻辑...
   
       try{
           /**
           参数说明
           1:高德key
           2:省级select元素jquery对象
           3:市级select元素jquery对象
           4:区县级select元素jquery对象
           5:省级初始值
           6:市级初始值
           7:区县级初始值
           */
           pca.initPca("高德key", $('#province'), $('#city'), $('#area'), "广东省", "广州市", "天河区")
   
           //如果有多个实例,需要多次初始化(注意select元素的id不能相同),如:
           //pca.initPca("高德key", $('#province2'), $('#city2'), $('#area2'), "广东省", "广州市", "天河区")
       }
       catch(e){
           console.error(e)
       }
       
       //你的逻辑...
   })
   </script>

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

特技

1. 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
2. Gitee 官方博客 blog.gitee.com
3. 你可以 https://gitee.com/explore 这个地址来了解 Gitee 上的优秀开源项目
4. GVP 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5. Gitee 官方提供的使用手册 https://gitee.com/help
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 https://gitee.com/gitee-stars/