<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市区三级联动</title>
<!--加载jQuery-->
<script src="jquery.js"></script>
</head>
<body>
<select name="" id="selProvince">
<option value="">——请选择——</option>
</select>
<select name="" id="selCity">
<option value="">——请选择——</option>
</select>
<select name="" id="selCountry">
<option value="">——请选择——</option>
</select>
</body>
</html>
<script>
var iNum1;
var iNum2;
var aProvince = [‘湖北’,’江苏’,’安徽’];
var aCity =[[‘武汉’,’黄冈’,’荆门’],[‘南京’,’无锡’,’镇江’],[‘合肥’,’安庆’,’黄山’]];
var aCountry =[[[‘武汉1’,’武汉2’],[‘黄冈1’,’黄冈2’],[‘荆门1’,’荆门2’]],[[‘南京1’,’南京2’],[‘无锡1’,’无锡2’],[‘镇江1’,’镇江2’]],[[‘合肥1’,’合肥2’],[‘安庆1’,’安庆2’],[‘黄山1’,’黄山2’]]];
console.log(province);
$(function () {
for(var i=0;i<aProvince.length;i++){
$('#selProvince').append('<option>'+aProvince[i]+'</option>');
};
$('#selProvince').change(function () {
$('#selCity').children().not(':eq(0)').remove();
$('#selCountry').children().not(':eq(0)').remove();
iNum1 = $(this).children('option:selected').index();
var aaCity = aCity[iNum1-1];
for(var j=0;j<aaCity.length;j++){
$('#selCity').append('<option>'+aaCity[j]+'</option>');
}
});
$('#selCity').change(function () {
$('#selCountry').children().not(':eq(0)').remove();
iNum2 = $(this).children('option:selected').index();
var aaCountry = aCountry[iNum1-1][iNum2-1];
for(var k=0;k<aaCountry.length;k++){
$('#selCountry').append('<option>'+aaCountry[k]+'</option>');
}
})
})
</script>