# 地区选择 city-picker-plus

基于 [city-picker](https://github.com/tshi0912/city-picker),让区域选择更方便。

>[info] 在任何作为区域选择的input控件上，增加`data-city-picker="1"` 即可。

### 特性

- 支持所有 [city-picker](https://github.com/tshi0912/city-picker) 的功能。

- 后台数据库与前台城市库完全一致。不用担心转换

- 多级ID方便获取和设置。

- 区域Id和区域名自动转化。

属性|意义

---|---

data-city-picker | 固定为：`data-city-picker='1'`

data-code-input | 区域code值对应的input控件的name，当选择 `河北省/石家庄市/桥西区` 时候，对应input框值为 `130000/130100/130104`

data-code-province-input | 省级code值对应的input控件的name,当选择 `河北省/石家庄市/桥西区` 时候，对应input框值为 `130000`

data-code-city-input | 市级code值对应的input控件的name,当选择 `河北省/石家庄市/桥西区` 时候，对应input框值为 `130100`

data-code-district-input | 区县级code值对应的input控件的name,当选择 `河北省/石家庄市/桥西区` 时候，对应input框值为 `130104`

data-code-last-input | 最后一级对应的input控件的name ,当选择 `河北省/石家庄市` 时候，对应input框值为 `130100`

>[info] 其中 `data-code-last-input` 是最后一级对应的值。如果你选择到省级，则为省级code值。如果选择到市级，则为市的code值，如果到区县级，则为区县的code值。

>[danger] 根据自己的需求设置需要的code级别，无需全部设置。

例

```html

```

效果

![city2]

上视频

src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/city1.mov">

## 初始化

初始化只需要在`city-picker`控件中设置value值即可，值为最后一级的`code值`。

例如

以`河北省/石家庄市/桥西区`为例。

区域|code值

---|---

河北省|130000

石家庄市|130100

桥西区|130104

如果我们设置`value='130100'`

```html

value="130100"

data-city-picker="1"

data-code-input="name4_code"

data-code-last-input="name4_code_last"

data-code-province-input="name4_code_province"

data-code-city-input="name4_code_city"

data-code-district-input="name4_code_district"

placeholder="请输入名称">

```

初始化效果为：

![city3]

如果我们设置到区县级，如`value='130104'`

则初始化效果为：

![city4]

[city2]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/city2.png

[city3]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/city3.png

[city4]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/city4.png