# 地區選擇 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

區域選擇：

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="請輸入名稱">

區域選擇的值：

data-code-input：

data-code-last-input:

data-code-province-input:

data-code-city-input:

data-code-district-input:

```

效果

![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

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的php获取citypicker的值,城市选择city-picker的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。