cityAreaSelect.js使用说明

  • cityAreaSelect.js使用说明已关闭评论
  • 16 次浏览
  • A+
所属分类:Web前端
摘要

该JS为省市区选择插件,当前最新版本为1.0,插件中地区数据更新于2024年07月02日,插件不依赖第三方JS,可独立使用。


 一、简介

该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)效果预览:

cityAreaSelect.js使用说明

四、参数说明

参数值 参数值类型 默认值 说明
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)     } });