<!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>