1、我们希望在注册页面中添加一个字段(籍贯)，当用户选择一个具体的省份，在后面的下拉列表中动态加载该省份下所有的城市。显示的效果如下：
2、步骤分析：
第一步：确定事件(onchange)并为其绑定一个函数
第二步：创建一个二维数组用于存储省份和城市
第三步：获取用户选择的省份
第四步：遍历二维数组中的省份
第五步：将遍历的省份与用户选择的省份比较
第六步：如果相同，遍历该省份下所有的城市
第七步：创建城市文本节点
第八步：创建option元素节点
第九步：将城市文本节点添加到option元素节点中去
第十步：获取第二个下拉列表，并将option元素节点添加进去
第十一步：每次操作前清空第二个下拉列表的option内容。
3、具体代码实现：（只实现了籍贯功能）
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>注册页面重新布局</title>
6 <style type="text/css">
7 #contanier{
8 border: 1px solid red;
9 width: 99%;
10 height: 600px;
11 position: relative;
12 }
13 #content{
14 border: 5px solid gray;
15 width: 50%;
16 height: 60%;
17 position: absolute;
18 top: 100px;
19 left: 300px;
20 background-color: white;
21 padding-top: 50px;
22 }
23 </style>
24
25 <script>
26 //1.创建一个二维数组用于存储
27 var cities=new Array(3);
28 cities[0]=new Array("武汉市","宜昌市","黄冈市","襄阳市");
29 cities[1]=new Array("长沙市","岳阳市","株洲市","郴州市");
30 cities[2]=new Array("石家庄市","邯郸市","廊坊市","保定市");
31 cities[3]=new Array("郑州市","洛阳市","开封市","安阳市");
32
33 function changeCity(val){
34
35 //7.获取第二个下拉列表
36 var cityEle=document.getElementById("city");
37
38 //9.清空第二个下拉列表的option内容
39 cityEle.options.length=0;
40
41 //2.遍历二维数组中的省份
42 for(var i=0;i<cities.length;i++){
43 if(val==i){ //注意！！比较的是角标
44 //3.遍历用户选择的省份下的城市
45 for(var j=0;j<cities[i].length;j++){
46 //alert(cities[i][j]);
47 //4.创建城市的文本节点
48 var textNode=document.createTextNode(cities[i][j]);
49 //5.创建option元素节点
50 var opEle=document.createElement("option");
51 //6.将城市的文本节点添加到option元素节点
52 opEle.appendChild(textNode);
53 //8.option元素节点添加到第二个下拉列表中去
54 cityEle.appendChild(opEle);
55 }
56 }
57 }
58 }
59 </script>
60 </head>
61 <body>
62 <!--中间注册表单部分div-->
63 <div id="contanier">
64 <div id="content">
65 <table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
66 <form method="get" action="#" onsubmit="return checkForm()">
67 <tr>
68 <td colspan="2" align="center">
69 <font size="5">会员注册</font>
70 </td>
71
72 </tr>
73 <tr>
74 <td>
75 用户名
76 </td>
77 <td>
78 <input type="text" name="username" id="username"/>
79 </td>
80 </tr>
81 <tr>
82 <td>密码</td>
83 <td>
84 <input type="password" name="password" id="password"/>
85 </td>
86 </tr>
87 <tr>
88 <td>确认密码</td>
89 <td>
90 <input type="password" name="repassword" />
91 </td>
92 </tr>
93 <tr>
94 <td>email</td>
95 <td>
96 <input type="text" name="email" id="email" />
97 </td>
98 </tr>
99 <tr>
100 <td>姓名</td>
101 <td>
102 <input type="text" name="name" />
103 </td>
104 </tr>
105 <!--1.编写HTML文件部分的内容-->
106 <tr>
107 <td>籍贯</td>
108 <td>
109 <!--2.确定事件，通过函数传参的方式拿到改变后的城市-->
110 <select onchange="changeCity(this.value)">
111 <option>--请选择--</option>
112 <option value="0">湖北</option>
113 <option value="1">湖南</option>
114 <option value="2">河北</option>
115 <option value="3">河南</option>
116 </select>
117 <select id="city">
118
119 </select>
120 </td>
121 </tr>
122 <tr>
123 <td>性别</td>
124 <td>
125 <input type="radio" name="sex" value="男"/>男
126 <input type="radio" name="sex" value="女"/>女
127 </td>
128 </tr>
129 <tr>
130 <td>出生日期</td>
131 <td>
132 <input type="text" name="birthday" />
133 </td>
134 </tr>
135 <tr>
136 <td>验证码</td>
137 <td>
138 <input type="text" name="yanzhengma" />
139 <img src="../img/yanzhengma.png" />
140 </td>
141 </tr>
142 <tr>
143 <td colspan="2" align="center">
144 <input type="submit" value="注册" />
145 </td>
146 </tr>
147 </form>
148 </table>
149 </div>
150 </div>
151 </div>
152 </body>
153 </html>
在谷歌浏览器内运行，实现了需求中的效果。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
