cityAreaSelect.js使用说明
cnblogs 2024-07-12 08:11:00 阅读 92
省市区选择JS插件
一、简介
该JS为省市区选择插件，当前最新版本为1.0，插件中地区数据更新于2024年07月02日，插件不依赖第三方JS，可独立使用。
github地址：https://github.com/TammyViola/cityAreaSelect
二、CSS和JS引用
PS：样式可根据项目实际情况进行调整
<code><link href="./dist/css/cityAreaSelect.css" rel="stylesheet" type="text/css"/>code>
...
<script type="text/javascript" src="./dist/js/cityAreaSelect.min.js"></script>code>
三、html编写及对应JS调用
1. 省市区-select控件-3级联动
1）html代码：
<div >
<div >
<select >
<option value="">请选择省/直辖市</option>code>
</select>
</div>
<div >
<select >
<option value="">请选择城市/区</option>code>
</select>
</div>
<div >
<select >
<option value="">请选择区/县</option>code>
</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 >
<div >
<select >
<option value="">请选择省/直辖市</option>code>
</select>
</div>
<div >
<select >
<option value="">请选择城市/区</option>code>
</select>
</div>
</div>
2）JS代码：
const pcaSelect2 = new ProvinceCityAreaSelect({
addrValElem: ['provinceSelect2', 'citySelect2']
});
3. 省市区-自定义div控件-3级联动
1）html代码：
<div >
<div >
<div >
<input type="text" hidden >code>
<div >请选择省/直辖市</div>
</div>
</div>
<div >
<div >
<input type="text" hidden >code>
<div >请选择城市/区</div>
</div>
</div>
<div >
<div >
<input type="text" hidden >code>
<div >请选择区/县</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 >
<div >
<div >
<input type="text" hidden >code>
<div >请选择省/直辖市</div>
</div>
</div>
<div >
<div >
<input type="text" hidden >code>
<div >请选择城市/区</div>
</div>
</div>
</div>
2）JS代码：
const pcaSelect4 = new ProvinceCityAreaSelect({
addrValElem: ['provinceSelect4', 'citySelect4']
});
5. 省市区-自定义div控件-多级合并
1）html代码：
<div >
<div >
<div >
<div >
<input type="text" hidden >code>
<div >请选择省市区</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值。
<code>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)
}
});
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。