# 地区选择 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