- A+
所属分类：Web前端
一、简介
该JS为省市区选择插件，当前最新版本为1.0，插件中地区数据更新于2024年07月02日，插件不依赖第三方JS，可独立使用。
github地址：https://github.com/TammyViola/cityAreaSelect
二、CSS和JS引用
PS：样式可根据项目实际情况进行调整
<link href="./dist/css/cityAreaSelect.css" rel="stylesheet" type="text/css"/> ... <script type="text/javascript" src="./dist/js/cityAreaSelect.min.js"></script>三、html编写及对应JS调用
1. 省市区-select控件-3级联动
1）html代码：
<div class="cityAreaSelect-group row"> <div class="cityAreaSelect-item col-md-4"> <select class="cityAreaSelect-select" id="provinceSelect1"> <option value="">请选择省/直辖市</option> </select> </div> <div class="cityAreaSelect-item col-md-4"> <select class="cityAreaSelect-select" id="citySelect1"> <option value="">请选择城市/区</option> </select> </div> <div class="cityAreaSelect-item col-md-4"> <select class="cityAreaSelect-select" id="areaSelect1"> <option value="">请选择区/县</option> </select> </div> </div>2）JS代码：
const pcaSelect1 = new ProvinceCityAreaSelect({ addrValElem: ['provinceSelect1', 'citySelect1', 'areaSelect1'], onInit: function(provinceSelect, citySelect, areaSelect){ //console.log(provinceSelect+', '+citySelect+', '+areaSelect) }, onSelected: function(provinceVal, cityVal, areaVal){ //console.log(provinceVal+', '+cityVal+', '+areaVal) } });
2. 省市-select控件-2级联动
1）html代码：
<div class="cityAreaSelect-group row"> <div class="cityAreaSelect-item col-md-6"> <select class="cityAreaSelect-select" id="provinceSelect2"> <option value="">请选择省/直辖市</option> </select> </div> <div class="cityAreaSelect-item col-md-6"> <select class="cityAreaSelect-select" id="citySelect2"> <option value="">请选择城市/区</option> </select> </div> </div>2）JS代码：
const pcaSelect2 = new ProvinceCityAreaSelect({ addrValElem: ['provinceSelect2', 'citySelect2'] });
3. 省市区-自定义div控件-3级联动
1）html代码：
<div class="cityAreaSelect-group row"> <div class="cityAreaSelect-item col-md-4"> <div class="cityAreaSelect-custom-box"> <input type="text" hidden class="cityAreaSelect-input" id="provinceSelect3"> <div class="cityAreaSelect-text">请选择省/直辖市</div> </div> </div> <div class="cityAreaSelect-item col-md-4"> <div class="cityAreaSelect-custom-box"> <input type="text" hidden class="cityAreaSelect-input" id="citySelect3"> <div class="cityAreaSelect-text">请选择城市/区</div> </div> </div> <div class="cityAreaSelect-item col-md-4"> <div class="cityAreaSelect-custom-box"> <input type="text" hidden class="cityAreaSelect-input" id="areaSelect3"> <div class="cityAreaSelect-text">请选择区/县</div> </div> </div> </div>2）JS代码：
const pcaSelect3 = new ProvinceCityAreaSelect({ addrValElem: ['provinceSelect3', 'citySelect3', 'areaSelect3'], onSelected: function(provinceVal, cityVal, areaVal){ //console.log(provinceVal+', '+cityVal+', '+areaVal) } });
4. 省市区-自定义div控件-2级联动
1）html代码：
<div class="cityAreaSelect-group row"> <div class="cityAreaSelect-item col-md-6"> <div class="cityAreaSelect-custom-box"> <input type="text" hidden class="cityAreaSelect-input" id="provinceSelect4"> <div class="cityAreaSelect-text">请选择省/直辖市</div> </div> </div> <div class="cityAreaSelect-item col-md-6"> <div class="cityAreaSelect-custom-box"> <input type="text" hidden class="cityAreaSelect-input" id="citySelect4"> <div class="cityAreaSelect-text">请选择城市/区</div> </div> </div> </div>2）JS代码：
const pcaSelect4 = new ProvinceCityAreaSelect({ addrValElem: ['provinceSelect4', 'citySelect4'] });
5. 省市区-自定义div控件-多级合并
1）html代码：
<div class="cityAreaSelect-wrapper"> <div class="cityAreaSelect-group row"> <div class="cityAreaSelect-item col-md-8"> <div class="cityAreaSelect-merge-box"> <input type="text" hidden class="cityAreaSelect-input" id="provinceSelect5"> <div class="cityAreaSelect-text">请选择省市区</div> </div> </div> </div> </div>2）JS代码：
const pcaSelect5 = new ProvinceCityAreaSelect({ addrValElem: 'provinceSelect5', separator: '-', onInit: function(provinceSelect, citySelect, areaSelect){ //console.log(provinceSelect+', '+citySelect+', '+areaSelect) }, });3）效果预览：
四、参数说明
| 参数值 | 参数值类型 | 默认值 | 说明 |
| addrValElem | String / Array | null |
1. Array类型：省市区控件Id，例如：['provinceSelect1', 'citySelect1', 'areaSelect1'] 2. String类型：自定义div省市区多级合并时使用，参数值为隐藏域input的Id，例如： 'cityAreaInput' |
| separator | String | ' '（空格符） |
自定义div省市区多级合并时使用，自定义省市区地名间的间隔连接符号； 例如：separator: '-' （北京市-东城区） |
| provinceWord | String | '请选择省/直辖市' | 省/市占位提示语 |
| cityWord | String | '请选择城市/区' | 市/区占位提示语 |
| areaWord | String | '请选择区/县' | 区/县占位提示语 |
| mergeWord | String | '请选择省市区' |
1. 省市区合并时且web端才有效，其他时候无效； 2. 省市区合并显示控件占位提示语 |
| onInit | Function | null |
JS初始加载后回调，可返回省市区控件id值 |
| onSelected | Function | null |
省市区选择后回调，可返回省市区当前值value |
五、Events事件
1. onInit ：初始加载后回调
该参数为插件初始加载后回调，可返回省市区控件id值。
const pcaSelect = new ProvinceCityAreaSelect({ addrValElem: ['provinceSelect', 'citySelect', 'areaSelect'], onInit: function(provinceSelect, citySelect, areaSelect){ //console.log(provinceSelect+', '+citySelect+', '+areaSelect) } });
2. onSelected : 省市区选择后回调
该参数为插件 省市区选择后回调，可返回省市区当前值value。
const pcaSelect = new ProvinceCityAreaSelect({ addrValElem: ['provinceSelect', 'citySelect', 'areaSelect'], onSelected: function(provinceVal, cityVal, areaVal){ //console.log(provinceVal+', '+cityVal+', '+areaVal) } });
