省市区选择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）效果预览：

四、参数说明

五、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)

}

});