注意点：
1、select的onchange事件
2、<option value=""></option> 巧妙使用value值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市地址二级联动</title>
<style>
*{
margin: 0;
padding: 0;
}
#pro,#city{
margin-left: 10px;
margin-top: 20px;
120px;
height: 30px;
}
#city{
display: none;
}
</style>
</head>
<body>
<select name="" id="pro"></select>
<select name="" id="city"></select>
</body>
<script>
//设置一个包含地址信息的对象
var address = {
'0':{
'1':'北京市',
'2':'四川省',
'3':'河北省',
'4':'浙江省'
},
'1':{
'5':"朝阳区",
'6':'海淀区',
'7':'东城区',
'8':'西城区',
'9':'丰台区',
},
'2':{
'10':'成都市',
'11':'泸州市',
'12':'内江市',
'13':'达州市'
},
'3':{
'14':'邯郸市',
'15':'保定市',
'16':'信阳市'
},
'4':{
'17':'宁波市',
'18':'余姚市',
'19':'绍兴市'
}
};
//获取元素
var pro = document.getElementById('pro');
var city = document.getElementById('city');
var proStr = '<option value="">请选择</option>';
for(var i in address[0]){
proStr += '<option value="'+ i +'">'+ address[0][i] +'</option>'
}
pro.innerHTML = proStr;
//当所选择的省份改变时，显示相应市
pro.onchange = function(){
city.style.display = 'inline-block';
var index = this.value;
if(index == ''){
city.style.display = 'none';
return;
}
var cityStr = '<option value="">请选择</option>';
for(var i in address[index]){
cityStr += '<option value="">'+ address[index][i] +'</option>';
}
city.innerHTML = cityStr;
}
</script>
</html>