你的位置:首页 > Java教程

[Java教程]JavaScript学习——使用JS完成省市二级联动

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>

在谷歌浏览器内运行,实现了需求中的效果。