# 地區選擇 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
<div class="row">
<div class="col-6" >
<div class="form-group" >
<label >區域選擇:</label>
<input type="text" class="form-control" name="name4" style="width: 350px;"
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="請輸入名稱">
</div>
</div>
<div class="col-6" >
<div class="form-group" >
<label >區域選擇的值:</label><br>
data-code-input:<input type="text" name="name4_code" style="width: 300px"><br>
data-code-last-input: <input type="text" name="name4_code_last"><br>
data-code-province-input: <input type="text" name="name4_code_province"><br>
data-code-city-input: <input type="text" name="name4_code_city"><br>
data-code-district-input: <input type="text" name="name4_code_district">
</div>
</div>
</div>
```
效果
![city2]
上視頻
<p>
<video controls="controls" width="100%"
src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/city1.mov"></video>
</p>
## 初始化
初始化只需要在`city-picker`控件中設置value值即可,值為最后一級的`code值`。
例如
以`河北省/石家莊市/橋西區`為例。
區域|code值
---|---
河北省|130000
石家莊市|130100
橋西區|130104
如果我們設置`value='130100'`
```html
<input type="text" class="form-control" name="name4" style="width: 350px;"
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
- 簡介/安裝
- 快速搭建一個用戶中心
- Js代碼寫在哪里
- 環境變量Args
- 前臺組件
- Dialog方式打開頁面
- Addtab方式打開頁面
- Alert提醒框
- Confirm確認框
- Prompt輸入框
- 表單Form
- 列表Table/list
- 基礎Table
- 控制Table
- 搜索Table
- 城市選擇city-picker
- 文件上傳組件
- 基礎版本
- 簡單版本
- 更多實用組件
- 后臺
- 實現方式綜述
- 命令管理類JsCmd
- 命令
- Alert命令
- Url命令
- Toast命令
- JsEval命令
- Close命令
- Refresh命令
- CloseAndRefresh命令
- 常用命令的簡化
- 文件上傳
- 后臺基礎
- 后臺進階
- 左側導航badge配置