1 <html>
2 <head>
3 <meta charset="utf-8">
4 <title>下拉框</title>
5 <script language="javascript">
6 function reg(){
7 var p,c,a,flag=false;
8 p=document.getElementById("pro").value;
9 c=document.getElementById("city").value;
10 a=document.getElementById("area").value;
11 //alert(p+"__"+c+"__"+a);
12 if(p.match("请选择")||c.match("请选择")||a.match("请选择")){
13 alert("请将籍贯选择完整！");
14 return false;
15 }
16 }
17 </script>
18 </head>
19 <body>
20 <form method="post" action="xxx.jsp">
21 <table border="1" cellspacing="0" cellpadding="5px" width="600px" style="margin:10% 26%">
22 <tr>
23 <td align="center" width="200px">籍贯</td>
24 <td align="center" width="200px"><select id="pro" onchange="createCity(this)"><option>--请选择--</option></select></td>
25 <td align="center" width="200px"><select id="city" onchange="createArea(this)"><option>--请选择--</option></select></td>
26 <td align="center" width="200px"><select id="area"><option>--请选择--</option></select></td>
27 </tr>
28 <tr><td colspan="4" align="center"><input type="submit" onclick="return reg()"/></td></tr>
29 </table>
30 </form>
31 <script language="javascript">
32 //创建一个省份数组[]
33 var provinces=[];
34 //数组里的每个值都是对象{}
35 provinces[0]={pid:'上海',pname:'上海',city:[{cid:'黄埔',cname:'黄埔',area:[{aid:'外滩',aname:'外滩'},{aid:'新天地',aname:'新天地'},{aid:'南京东路',aname:'南京东路'}]},{cid:'静安',cname:'静安',area:[{aid:'静安寺',aname:'静安寺'},{aid:'美琪大戏院',aname:'美琪大戏院'},{aid:'胡公馆',aname:'胡公馆'}]},{cid:'徐汇',cname:'徐汇',area:[{aid:'衡山路',aname:'衡山路'},{aid:'龙华寺',aname:'龙华寺'},{aid:'桂林公园',aname:'桂林公园'}]}]};
36 provinces[1]={pid:'江苏',pname:'江苏',city:[{cid:'南京',cname:'南京',area:[{aid:'中山陵',aname:'中山陵'},{aid:'明孝陵',aname:'明孝陵'},{aid:'玄武湖',aname:'玄武湖'}]},{cid:'连云港',cname:'连云港',area:[{aid:'花果山',aname:'花果山'},{aid:'秦山岛',aname:'秦山岛'},{aid:'孔望山',aname:'孔望山'}]},{cid:'苏州',cname:'苏州',area:[{aid:'太湖',aname:'太湖'},{aid:'狮子林',aname:'狮子林'},{aid:'周庄',aname:'周庄'}]}]};
37 provinces[2]={pid:'安徽',pname:'安徽',city:[{cid:'合肥',cname:'合肥',area:[{aid:'逍遥津',aname:'逍遥津'},{aid:'天鹅湖',aname:'天鹅湖'},{aid:'包公园',aname:'包公园'}]},{cid:'安庆',cname:'安庆',area:[{aid:'天柱山',aname:'天柱山'},{aid:'迎江寺',aname:'迎江寺'},{aid:'振风塔',aname:'振风塔'}]},{cid:'黄山',cname:'黄山',area:[{aid:'奇松',aname:'奇松'},{aid:'怪石',aname:'怪石'},{aid:'云海',aname:'云海'}]}]};
38
39 //创建自动生成的省份
40 function createProvince(){
41 var pro=document.getElementById("pro");
42 //pro.options.length=0;//默认显示第一行
43 for(var i=0;i<provinces.length;i++){
44 var opt=document.createElement("option");
45 opt.innerText=provinces[i].pid;
46 opt.value=provinces[i].pname;
47 pro.options.add(opt);
48 }
49 }
50 //创建根据省份名称从而动态创建城市名称
51 function createCity(obj){
52 var city=document.getElementById("city");
53 //city.options.length=0;//默认显示第一行
54 city.options.length=1;
55 for(var i=0;i<provinces.length;i++){
56 if(obj.value==provinces[i].pname){
57 var citys=provinces[i].city;
58 for(var j=0;j<citys.length;j++){
59 var opt=document.createElement("option");
60 opt.innerText=citys[j].cid;
61 opt.value=citys[j].cname;
62 city.options.add(opt);
63 }
64 }
65 }
66 }
67 //根据城市名称动态创建区域名称
68 function createArea(obj){
69 var area=document.getElementById("area");
70 area.options.length=1;
71 for(var i=0;i<provinces.length;i++){
72 var citys=provinces[i].city;
73 for(var j=0;j<citys.length;j++){
74 //alert(obj.value+"_____"+citys[j].cname);
75 if(obj.value==citys[j].cname){
76 var areas=citys[j].area;
77 for(var k=0;k<areas.length;k++){
78 var opt=document.createElement("option");
79 opt.innerText=areas[k].aid;
80 opt.value=areas[k].aname;
81 area.options.add(opt);
82 }
83 }
84 }
85 }
86 }
87 //默认第一行为请选择
88 createProvince();
89
90 //默认显示第一行
91 //createProvince();
92 //createCity(document.getElementById("pro"));
93 </script>
94 </body>
95 </html>
