在网上看了很多的效果，但是总感觉不是自己想要的效果，故花了一些时间整理了国家的省市区的行政区域规划的JSON格式的数据（2018年4月的哦），并使用jq实现了传参；
一、html文件如下，select标签选择时，需要传入select标签当前选中的val值（val）和索引（index），html文件下面的js是对地址初始化的处理：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>地址的三级联动</title>
<script src="jquery.js"></script>
<script src="addr_msg.js" type="text/javascript" charset="utf-8"></script>
<script src="index.js" charset="utf-8" type="text/javascript"></script>
</head>
<body>
<select id="province" onchange="getCity(this.selectedIndex,this.value)">
<option value="请选择">请选择</option>
</select>
<select id="city" onchange="getCounty(this.selectedIndex,this.value)">
<option value="请选择">请选择</option>
</select>
<select id="county">
<option value="请选择">请选择</option>
</select>
</body>
<script>
//初始化的时候用到 1级2级 的index
var firstId = 0;
var secId = 0;
window.onload = function() {
//console.log(areaJson.length)
getProvince(); //调用初始化省份的方法
//初始化 省市县的数据
var oProvince = "河南省";
var oCity = "开封市";
var oCounty = "祥符区";
//如果"省"-"市"-"县"无数据,则初始化数据--省份
//console.log($('#province option').length);
if(oProvince.length == 0 || oCity.length == 0 || oCounty.length == 0) {
//if(oProvince.length != 0) {
return;
} else {
$('#province option').each(function() {
//console.log($(this).val());
if($(this).val().indexOf(oProvince) >= 0) {
//alert(1)
$(this).prop("selected", true); //默认选中省份
firstId = $(this).select().index(); //获取省份的 id
}
});
for(var i = 0; i < areaJson[firstId - 1].countyList.length; i++) {
//console.log(areaJson[oChushi - 1].countyList[i].city);
var cityData = areaJson[firstId - 1].countyList[i].city;
$('#city').append("<option value='" + cityData + "'>" + cityData + "</option>"); //添加城市列表
}
$('#city option').each(function() {
// console.log($(this).val());
if($(this).val().indexOf(oCity) >= 0) {
//alert(1)
$(this).prop("selected", true); //默认选中城市
secId = $(this).select().index(); //获取城市的 id
}
});
for(var i = 0; i < areaJson[firstId - 1].countyList[secId - 1].county.length; i++) {
// console.log(areaJson[oChushi - 1].countyList[oChushi1 - 1].county[i].countyName);
var countyData = areaJson[firstId - 1].countyList[secId - 1].county[i].countyName;
$('#county').append("<option value='" + countyData + "'>" + countyData + "</option>"); //添加 县级列表
}
$('#county option').each(function() {
//console.log($(this).val());
if($(this).val().indexOf(oCounty) >= 0) {
//alert(1)
$(this).prop("selected", true); //默认选中县
}
});
}
}
</script>
</html>二、下面是引入的index.js的内容，主要是html文件中调用的方法
//初始化事件，获得所有省
function getProvince() {
var oProvince = $("#province");
for(var i = 0; i < areaJson.length; i++) {
oProvince.append("<option value='" + areaJson[i].province + "'>" + areaJson[i].province + "</option>");
}
}
/*点击省份事件------获取所有市*/
function getCity(proid, val) {
console.log(proid,val);
var oCity=$('#city');
var oCounty=$('#county');
if(val.indexOf('选择') >= 0) { //如果选择的是 请选择
// getProvince();
oCity.empty().append("<option value='请选择'>请选择</option>");
oCounty.empty().append("<option value='请选择'>请选择</option>");
return false;
}
firstId = proid;
oCity.empty().append("<option value='请选择'>请选择</option>");
oCounty.empty().append("<option value='请选择'>请选择</option>");
console.log(areaJson[proid - 1].countyList.length);
if(areaJson[proid - 1].countyList.length==0){ //如果城市的长度为空
oCity.empty().append("<option value='请选择'>请选择</option>");
oCounty.empty().append("<option value='请选择'>请选择</option>");
return false;
}
for(var i = 0; i < areaJson[proid - 1].countyList.length; i++) {
//console.log(areaJson[proid - 1].countyList[i].city);
var cityData = areaJson[proid - 1].countyList[i].city;
oCity.append("<option value='" + cityData + "'>" + cityData + "</option>");
}
}
/*根据省和市----获取县*/
function getCounty(cityId,val) {
console.log(cityId,val);
var oCounty=$('#county');
if(val.indexOf('选择') >= 0) { //如果选择的是 请选择
oCounty.empty().append("<option value='请选择'>请选择</option>");
return false;
}
secId = cityId;
oCounty.empty().append("<option value='请选择'>请选择</option>");
for(var i = 0; i < areaJson[firstId - 1].countyList[secId - 1].county.length; i++) {
console.log(areaJson[firstId - 1].countyList[secId - 1].county[i].countyName);
var countyData = areaJson[firstId - 1].countyList[secId - 1].county[i].countyName;
oCounty.append("<option value='" + countyData + "'>" + countyData + "</option>");
}
}三，第三部分是本人花了一些时间整理的国家行政区域规划的数据信息，并处理成了json格式的数据，放在addr_msg.js文件中，已经上传到了百度网盘，链接地址为：https://pan.baidu.com/s/1Z1nPx7hiOUcjSUaBLrl3-Q 点击打开链接
四：温馨提示：使用前别忘了引入jq文件哦，以上内容或者地区规划信息不全，欢迎大家留言交流
毕竟花了一些时间整理数据，本文为原创，如需转载请标明出处，谢谢！
都是程序员，看完觉得好的或者用的上的，请点个赞再离开