<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select id="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="nanjing">南京</option>
</select>
<select id="area">
<option >海淀</option>
<option >朝阳</option>
<option >东城</option>
</select>
</body>
<script type="text/javascript">
var select=document.getElementById("city");
select.onchange=function(){
var optionVal=select.value;
switch(optionVal){
case 'beijing':
var area=document.getElementById("area");
area.innerHTML="<option>海淀</option><option>朝阳</option><option>东城</option>";
break;
case 'shanghai':
var area=document.getElementById("area");
area.innerHTML="<option>浦东</option><option>徐汇</option><option>闸北</option>";
break;
case 'nanjing':
var area=document.getElementById("area");
area.innerHTML="<option>鼓楼</option><option>玄武</option><option>浦口</option>";
break;
default:
alert("error");
}
};
</script>
</html>
