一、需求分析
我们希望在注册页面中添加一个字段(籍贯)，当用户选择一个具体的省份，在后面的下拉列表中动态加载该省份下所有的城市。显示的效果如下：
二、技术分析
- 使用事件(onchange)
- 使用一个二维数组来存储省份和城市
- 获取用户选择的省份(使用方法传参的方式：this.value)
- 遍历数组(获取省份与用户选择的省份比较，如果相同了，继续遍历该省份下所有的城市)
- 创建文本节点和元素节点并进行添加操作
createTextNode() 创建文本节点。
三、代码实现
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>注册页面重新布局</title> 6 <style type="text/css"> 7 .top{ 8 border: 1px solid red; 9 width: 32.9%; 10 height: 50px; 11 float: left; 12 } 13 14 #clear{ 15 clear: both; 16 } 17 #menu{ 18 border: 1px solid blue; 19 width: 99%; 20 height: 40px; 21 background-color: black; 22 } 23 #menu ul li{ 24 display: inline; 25 color: white; 26 font-size: 19px; 27 } 28 #bottom{ 29 text-align: center; 30 } 31 32 #content{ 33 border: 5px solid gray; 34 width: 50%; 35 height: 60%; 36 position: absolute; 37 top: 100px; 38 left: 300px; 39 background-color: white; 40 padding-top: 50px; 41 } 42 43 </style> 44 45 <script> 46 //1.创建一个二维数组用于存储省份和城市 47 var cities = new Array(3); 48 cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市"); 49 cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市"); 50 cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市"); 51 cities[3] = new Array("郑州市","洛阳市","开封市","安阳市"); 52 53 function changeCity(val){ 54 55 //7.获取第二个下拉列表 56 var cityEle = document.getElementById("city"); 57 58 //9.清空第二个下拉列表的option内容 59 cityEle.options.length=0; 60 61 //2.遍历二维数组中的省份 62 for(var i=0;i<cities.length;i++){ 63 //注意，比较的是角标 64 if(val==i){ 65 //3.遍历用户选择的省份下的城市 66 for(var j=0;j<cities[i].length;j++){ 67 //alert(cities[i][j]); 68 //4.创建城市的文本节点 69 var textNode = document.createTextNode(cities[i][j]); 70 //5.创建option元素节点 71 var opEle = document.createElement("option"); 72 //6.将城市的文本节点添加到option元素节点 73 opEle.appendChild(textNode); 74 //8.将option元素节点添加到第二个下拉列表中去 75 cityEle.appendChild(opEle); 76 } 77 } 78 } 79 } 80 </script> 81 82 </head> 83 <body> 84 <div> 85 86 87 88 89 90 <div id="contanier"> 91 <div id="content"> 92 <table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white"> 93 <form method="get" action="#" onsubmit="return checkForm()"> 94 <tr> 95 <td colspan="2" align="center"> 96 <font size="5">会员注册</font> 97 </td> 98 99 </tr> 100 <tr> 101 <td> 102 用户名 103 </td> 104 <td> 105 <input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span> 106 </td> 107 </tr> 108 <tr> 109 <td>密码</td> 110 <td> 111 <input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位！')" onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span> 112 </td> 113 </tr> 114 <tr> 115 <td>确认密码</td> 116 <td> 117 <input type="password" name="repassword" /> 118 </td> 119 </tr> 120 <tr> 121 <td>email</td> 122 <td> 123 <input type="text" name="email" id="email" /> 124 </td> 125 </tr> 126 <tr> 127 <td>姓名</td> 128 <td> 129 <input type="text" name="name" /> 130 </td> 131 </tr> 132 <tr> 133 <td>籍贯</td> 134 <td> 135 <select onchange="changeCity(this.value)"> 136 <option>--请选择--</option> 137 <option value="0">湖北</option> 138 <option value="1">湖南</option> 139 <option value="2">河北</option> 140 <option value="3">河南</option> 141 </select> 142 <select id="city"> 143 144 </select> 145 </td> 146 </tr> 147 <tr> 148 <td>性别</td> 149 <td> 150 <input type="radio" name="sex" value="男"/>男 151 <input type="radio" name="sex" value="女"/>女 152 </td> 153 </tr> 154 <tr> 155 <td>出生日期</td> 156 <td> 157 <input type="text" name="birthday" /> 158 </td> 159 </tr> 160 <tr> 161 <td>验证码</td> 162 <td> 163 <input type="text" name="yanzhengma" /> 164 <img src="../img/yanzhengma.png" /> 165 </td> 166 </tr> 167 <tr> 168 <td colspan="2"> 169 <input type="submit" value="注册" /> 170 </td> 171 </tr> 172 </form> 173 </table> 174 </div> 175 </div> 176 177 </div> 178 </body> 179 </html>