cityAreaSelect.js使用说明

蒋传领

 一、简介

该JS为省市区选择插件，当前最新版本为1.0，插件中地区数据更新于2024年07月02日，插件不依赖第三方JS，可独立使用。
github地址：https://github.com/TammyViola/cityAreaSelect
 
二、CSS和JS引用

PS：样式可根据项目实际情况进行调整

1. <link href="./dist/css/cityAreaSelect.css" rel="stylesheet" type="text/css"/>
2. ...

复制代码

三、html编写及对应JS调用

1. 省市区-select控件-3级联动

1）html代码：

1.    
2.         <select  id="provinceSelect1">
3.             <option value="">请选择省/直辖市</option>
4.         </select>
5.    
6.    
7.         <select  id="citySelect1">
8.             <option value="">请选择城市/区</option>
9.         </select>
10.    
11.    
12.         <select  id="areaSelect1">
13.             <option value="">请选择区/县</option>
14.         </select>
15.    

复制代码

2）JS代码：

1. const pcaSelect1 = new ProvinceCityAreaSelect({
2.     addrValElem: ['provinceSelect1', 'citySelect1', 'areaSelect1'],
3.     onInit: function(provinceSelect, citySelect, areaSelect){
4.         //console.log(provinceSelect+', '+citySelect+', '+areaSelect)
5.     },
6.     onSelected: function(provinceVal, cityVal, areaVal){
7.         //console.log(provinceVal+', '+cityVal+', '+areaVal)
8.     }
9. });

复制代码

 
2. 省市-select控件-2级联动

1）html代码：

1.    
2.         <select  id="provinceSelect2">
3.             <option value="">请选择省/直辖市</option>
4.         </select>
5.    
6.    
7.         <select  id="citySelect2">
8.             <option value="">请选择城市/区</option>
9.         </select>
10.    

复制代码

2）JS代码：

1. const pcaSelect2 = new ProvinceCityAreaSelect({
2.     addrValElem: ['provinceSelect2', 'citySelect2']
3. });

复制代码

 
3. 省市区-自定义div控件-3级联动

1）html代码：

1.    
2.         
3.             <input type="text" hidden  id="provinceSelect3">
4.             请选择省/直辖市
5.         
6.    
7.    
8.         
9.             <input type="text" hidden  id="citySelect3">
10.             请选择城市/区
11.         
12.    
13.    
14.         
15.             <input type="text" hidden  id="areaSelect3">
16.             请选择区/县
17.         
18.    

复制代码

2）JS代码：

1. const pcaSelect3 = new ProvinceCityAreaSelect({
2.     addrValElem: ['provinceSelect3', 'citySelect3', 'areaSelect3'],
3.     onSelected: function(provinceVal, cityVal, areaVal){
4.         //console.log(provinceVal+', '+cityVal+', '+areaVal)
5.     }
6. });

复制代码

 
4. 省市区-自定义div控件-2级联动

1）html代码：

1.    
2.         
3.             <input type="text" hidden  id="provinceSelect4">
4.             请选择省/直辖市
5.         
6.    
7.    
8.         
9.             <input type="text" hidden  id="citySelect4">
10.             请选择城市/区
11.         
12.    

复制代码

2）JS代码：

1. const pcaSelect4 = new ProvinceCityAreaSelect({
2.     addrValElem: ['provinceSelect4', 'citySelect4']
3. });

复制代码

 
5. 省市区-自定义div控件-多级合并

1）html代码：

1.    
2.         
3.             
4.                 <input type="text" hidden  id="provinceSelect5">
5.                 请选择省市区
6.             
7.         
8.    

复制代码

2）JS代码：

1. const pcaSelect5 = new ProvinceCityAreaSelect({
2.     addrValElem: 'provinceSelect5',
3.     separator: '-',
4.     onInit: function(provinceSelect, citySelect, areaSelect){
5.         //console.log(provinceSelect+', '+citySelect+', '+areaSelect)
6.     },
7. });

复制代码

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值。

1. const pcaSelect = new ProvinceCityAreaSelect({
2.     addrValElem: ['provinceSelect', 'citySelect', 'areaSelect'],
3.     onInit: function(provinceSelect, citySelect, areaSelect){
4.         //console.log(provinceSelect+', '+citySelect+', '+areaSelect)
5.     }
6. });

复制代码

 
2. onSelected : 省市区选择后回调

该参数为插件 省市区选择后回调，可返回省市区当前值value。

1. const pcaSelect = new ProvinceCityAreaSelect({
2.     addrValElem: ['provinceSelect', 'citySelect', 'areaSelect'],
3.     onSelected: function(provinceVal, cityVal, areaVal){
4.         //console.log(provinceVal+', '+cityVal+', '+areaVal)
5.     }
6. });

复制代码

 

来源:https://www.cnblogs.com/TammyBlog/p/18296123
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！