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='/images/loading.gif' data-original="../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>
在谷歌浏览器内运行,实现了需求中的效果。
原标题:JavaScript学习——使用JS完成省市二级联动
关键词:JavaScript