首页 > > 网页制作 > Javascript >

JavaScript学习——使用JS完成省市二级联动

2018-06-24 00:00:33来源：未知阅读 ()

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>