<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function fun1(){
var p=["山西省","山东省","河南省","河北省"];
//创建option节点对象
var defaultOption=new Option("请选择省份","-1");
var pName=document.getElementById("p");
pName.appendChild(defaultOption);
for(i=0;i<p.length;i++){
var optionNode=new Option(p[i],i);
pName.appendChild(optionNode);
}
}
function fun2(obj){
var city=[["太原","大同","运城"],
["青岛","济南","淄博"],
["郑州","开封","焦作"],
["石家庄","廊坊","衡水"]];
var cNode=document.getElementById("c");
cNode.innerHTML="";
var defaultOption=new Option("请选择城市");
cNode.appendChild(defaultOption);
for(i=0;i<city[obj].length;i++){
var optionNode=new Option(city[obj][i],i);
cNode.appendChild(optionNode);
}
}
</script>
</head>
<body onload="fun1()">
省:
<select name="p" id="p" onchange="fun2(this.value)" >
</select> 城市
<select name="c" id="c">
</select>
</body>
</html>
