实现效果
选择相应的省份，二级菜单默认显示省会城市，同时可以选择其他城市。
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/**
* 实现二级菜单级联
*/
var provinces=[
{
id:1001,
name:'江苏省',
cities:[
{
id:1,
name:'南京市'
},
{
id:2,
name:'苏州市'
},
{
id:3,
name:'扬州市'
},
{
id:4,
name:'徐州市'
},
{
id:5,
name:'常州市'
}
]
},
{
id:1002,
name:'山东省',
cities:[
{
id:1,
name:'济南市'
},
{
id:2,
name:'青岛市'
},
{
id:3,
name:'威海市'
},
{
id:4,
name:'烟台市'
},
{
id:5,
name:'德州市'
}
]
},
{
id:1003,
name:'广东省',
cities:[
{
id:1,
name:'广州市'
},
{
id:2,
name:'东莞市'
},
{
id:3,
name:'青远市'
},
{
id:4,
name:'佛山市'
},
{
id:5,
name:'深圳市'
}
]
}
];
window.onload = function(){
var province = document.getElementById("province");
var city = document.getElementById("city");
province.onchange = function(){
// 清除之前city下拉框内的数据,只留下第一个option
if(city.length>1){
city.length = 1;
}
var selected = provinces[province.selectedIndex-1]; //被选中省份的JSON对象
for(var i=0;i<selected.cities.length;i++){
//城市的name作为文本，城市的id作为value,创建新的option对象
var option = new Option(selected.cities[i].name,selected.cities[i].id);
city.add(option);//将option对象添加到city的末尾
}
city.selectedIndex = 1; //默认显示第二个option，即省会城市
}
}
</script>
</head>
<body>
省份：
<select id = "province">
<option value="0">--请选择省份--</option>
<option value="1">江苏省</option>
<option value="2">山东省</option>
<option value="3">广东省</option>
</select>
城市：
<select id="city">
<option value="0">--请选择城市--</option>
</select>
</body>
</html>