# layui-areaSelect

**Repository Path**: tonyweb/layui-areaSelect

## Basic Information

- **Project Name**: layui-areaSelect
- **Description**: 基于layui开发的地区选择、区域选择组件。可自定义选择层级、已选、排除选择，实现多级联动和区域统计
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 17
- **Created**: 2025-02-22
- **Last Updated**: 2025-02-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# layui-areaSelect

#### 介绍
基于layui扩展的省市区县选择组件，支持如下特性：  
1、指定层级选择，可指定到省份、城市、区县选择，默认省份选择；  
2、支持编辑回显，可指定已选数据，组件展示时将自动勾选；  
3、支持排除选择，可指定哪些区域作为排除选择，组件展示时将隐藏这些区域；  
4、多级联动机制，选中层级区域节点将自动映射对应父节点、子节点，并动态展示选中区域数量；  
5、精简选中返回结果，只返回必要的区域编码；  

该组件非常适合用于区域多选业务开发，比如运费模板中指定区域等类似业务，需要支持回显、排除其他已选等特性要求；  

#### 在线示例
请查看：https://zhou-wannian.gitee.io/layui-areaselect/

#### 软件架构
1、组件目前使用json数据作为区域展示依据，可替换为后台接口数据，需要注意的适配数据格式，亦可改造源码适配当前项目区域格式；  
2、考虑到区域本身可抽象为树形节点的结构，代码整体按照树状模型映射视图更新的模式来设计，核心采用数据驱动view的思路；  
3、当前项目基于layui封装，使用了layui中的jquery插件，但主体还是采用了js dom本身的api开发为主；  
4、本人本职工作是java后端开发，故该组件代码水平不能保证，能用级别而已，前端大神如有建议请及时指点一二，不胜感激；  
5、后续会完善更多版本出来，比如不依赖其他框架的版本、vue版本；  

#### 安装教程

1、vscode导入本项目，live server直接运行index.html即可看到效果；  
2、当前版本使用layui，如果前端项目本身是layui，那么直接集成即可，本身项目就是按照这样的例子来写的；其他类型项目也可加以改造使用；  

#### 使用说明

详见index.js，引入插件后，调用select方法传参即可，相关参数的含义和格式参考area.js和index.js；如有使用问题欢迎留言评论或发邮件；

#### 效果图
![选中回显](https://images.gitee.com/uploads/images/2021/0707/152002_71b5c7f0_8572136.png "1.png")
![全选](https://images.gitee.com/uploads/images/2021/0707/152019_392872c6_8572136.png "2.png")
![未选](https://images.gitee.com/uploads/images/2021/0707/152031_3c13c0e8_8572136.png "3.png")
![选择子区域](https://images.gitee.com/uploads/images/2021/0720/121541_bfbba305_8572136.png "QQ截图20210720121317.png")