# layui-selectArea

**Repository Path**: edrik/layui-selectArea

## Basic Information

- **Project Name**: layui-selectArea
- **Description**: layui  select area 省市区三级联动

- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2019-11-01
- **Last Updated**: 2021-11-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# layui-selectArea

#### 介绍
layui  select area 省市区三级联动

#### 使用说明

html

```html
<div class="layui-input-block" id='areabox'>
    <div class="layui-input-inline" style="width: 120px">
        <select name="addr.provinceId" id="provinceId" lay-filter="provinceId" class="select" lay-verify="required" ></select>
    </div>
    <div class="layui-input-inline" style="width: 120px">
        <select name="addr.cityId" id="cityId" lay-filter="cityId" class="select" lay-verify="required"></select>
    </div>
    <div class="layui-input-inline" style="width: 120px">
        <select name="addr.countyId" id='countyId' lay-filter="countyId" class="select" lay-verify="required" >
        </select>
    </div>
    <div class="layui-input-inline" style="width: 450px">
        <input id="address" name="addr.address" th:value="${vo.addr==null?'':vo.addr.address}" class="layui-input" type="text" lay-verify="required" placeholder="请输入..">
    </div>
</div>
```

js

```js

layui
    .config({
      base: "js/ext"
    })
    .extend({
      selectArea: "{/}js/ext/selectArea"
    });
  layui.use(["selectArea", "layer", "form"], function () {
    var $ = layui.$,
      form = layui.form,
      layer = layui.layer,
      selectArea = layui.selectArea;

    var ctx = '';

    selectArea.init({
      firstId: 'provinceId',
      children: {
        provinceId: {
          id: 'provinceId',
          defaultValue: 'BJ',
          url: ctx + 'json/prov.json',
          next: 'cityId'
        },
        cityId: {
          id: 'cityId',
          url: ctx + 'json/city-{provId}.json',
          next: "countyId"
        },
        countyId: {
          id: 'countyId',
          url: ctx + 'json/county-{cityId}.json'
        }
      }
    });
```