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

1、我们希望在注册页面中添加一个字段(籍贯)，当用户选择一个具体的省份，在后面的下拉列表中动态加载该省份下所有的城市。显示的效果如下：

2、步骤分析：

第一步：确定事件(onchange)并为其绑定一个函数

第二步：创建一个二维数组用于存储省份和城市

第三步：获取用户选择的省份

第四步：遍历二维数组中的省份

第五步：将遍历的省份与用户选择的省份比较

第六步：如果相同，遍历该省份下所有的城市

第七步：创建城市文本节点

第八步：创建option元素节点

第九步：将城市文本节点添加到option元素节点中去

第十步：获取第二个下拉列表，并将option元素节点添加进去

第十一步：每次操作前清空第二个下拉列表的option内容。

3、具体代码实现：（只实现了籍贯功能）

  1 
   2 
   3     
   4         
   5         
   6         
  24         
  25         
  60     
  61     
  62             
  63             

  64                 

  65                     
  66                         
  67                         
  68                             
  71                             
  72                         
  73                         
  74                             
  77                             
  80                         
  81                         
  82                             
  83                             
  86                         
  87                         
  88                             
  89                             
  92                         
  93                         
  94                             
  95                             
  98                         
  99                         
 100                             
 101                             
 104                         
 105                         
 106                         
 107                             
 108                             
 121                         
 122                         
 123                             
 124                             
 128                         
 129                         
 130                             
 131                             
 134                         
 135                         
 136                             
 137                             
 141                         
 142                         
 143                             
 146                         
 147                         
 148                     

  69                                 会员注册
  70                             

  75                                 用户名
  76                             

  78                                 
  79                             
密码

  84                                 
  85                             
确认密码

  90                                 
  91                             
email

  96                                 
  97                             
姓名

 102                                 
 103                             
籍贯

 109                                 
 110                                 
 111                                     --请选择--
 112                                     湖北
 113                                     湖南
 114                                     河北
 115                                     河南
 116                                 
 117                                 
 118                                     
 119                                 
 120                             
性别

 125                                 男
 126                                 女
 127                             
出生日期

 132                                 
 133                             
验证码

 138                                 
 139                                 
 140                             

 144                                                                             
 145                             
 149                 
 150             
 151