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