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> 2425 <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.遍历用户选择的省份下的城市 45for(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> 7172</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>
在谷歌浏览器内运行，实现了需求中的效果。
