一、需求分析

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

二、技术分析

  • 使用事件(onchange)
  • 使用一个二维数组来存储省份和城市
  • 获取用户选择的省份(使用方法传参的方式：this.value)
  • 遍历数组(获取省份与用户选择的省份比较，如果相同了，继续遍历该省份下所有的城市)
  • 创建文本节点和元素节点并进行添加操作

createTextNode()  创建文本节点。

三、代码实现

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>注册页面重新布局</title>

         <style type="text/css">

             .top{

                 border: 1px solid red;

                 width: 32.9%;

                 height: 50px;

                 float: left;

             }

             #clear{

                 clear: both;

             }

             #menu{

                 border: 1px solid blue;

                 width: 99%;

                 height: 40px;

                 background-color: black;

             }

             #menu ul li{

                 display: inline;

                 color: white;

                 font-size: 19px;

             }

             #bottom{

                 text-align: center;

             }

             #content{

                 border: 5px solid gray;

                 width: 50%;

                 height: 60%;

                 position: absolute;

                 top: 100px;

                 left: 300px;

                 background-color: white;

                 padding-top: 50px;

             }

         </style>

         <script>

             //1.创建一个二维数组用于存储省份和城市

             var cities = new Array(3);

             cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");

             cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");

             cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");

             cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");

             function changeCity(val){

                 //7.获取第二个下拉列表

                 var cityEle = document.getElementById("city");

                 //9.清空第二个下拉列表的option内容

                 cityEle.options.length=0;

                 //2.遍历二维数组中的省份

                 for(var i=0;i<cities.length;i++){

                     //注意，比较的是角标

                     if(val==i){

                         //3.遍历用户选择的省份下的城市

                         for(var j=0;j<cities[i].length;j++){

                             //alert(cities[i][j]);

                             //4.创建城市的文本节点

                             var textNode = document.createTextNode(cities[i][j]);

                             //5.创建option元素节点

                             var opEle = document.createElement("option");

                             //6.将城市的文本节点添加到option元素节点

                             opEle.appendChild(textNode);

                             //8.将option元素节点添加到第二个下拉列表中去

                             cityEle.appendChild(opEle);

                         }

                     }

                 }

             }

         </script>

     </head>

     <body>

         <div>

             <div id="contanier">

                 <div id="content">

                     <table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">

                         <form method="get" action="#" onsubmit="return checkForm()">

                         <tr>

                             <td colspan="2" align="center">

                                 <font size="5">会员注册</font>

                             </td>

                         </tr>

                         <tr>

                             <td>

                                 用户名

                             </td>

                             <td>

                                 <input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>

                             </td>

                         </tr>

                         <tr>

                             <td>密码</td>

                             <td>

                                 <input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位！')" onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span>

                             </td>

                         </tr>

                         <tr>

                             <td>确认密码</td>

                             <td>

                                 <input type="password" name="repassword" />

                             </td>

                         </tr>

                         <tr>

                             <td>email</td>

                             <td>

                                 <input type="text" name="email" id="email" />

                             </td>

                         </tr>

                         <tr>

                             <td>姓名</td>

                             <td>

                                 <input type="text" name="name" />

                             </td>

                         </tr>

                         <tr>

                             <td>籍贯</td>

                             <td>

                                 <select onchange="changeCity(this.value)">

                                     <option>--请选择--</option>

                                     <option value="0">湖北</option>

                                     <option value="1">湖南</option>

                                     <option value="2">河北</option>

                                     <option value="3">河南</option>

                                 </select>

                                 <select id="city">

                                 </select>

                             </td>

                         </tr>

                         <tr>

                             <td>性别</td>

                             <td>

                                 <input type="radio" name="sex" value="男"/>男

                                 <input type="radio" name="sex" value="女"/>女

                             </td>

                         </tr>

                         <tr>

                             <td>出生日期</td>

                             <td>

                                 <input type="text" name="birthday" />

                             </td>

                         </tr>

                         <tr>

                             <td>验证码</td>

                             <td>

                                 <input type="text" name="yanzhengma" />

                                 <img src="../img/yanzhengma.png" />

                             </td>

                         </tr>

                         <tr>

                             <td colspan="2">

                                 <input type="submit" value="注册" />

                             </td>

                         </tr>

                         </form>

                     </table>

                 </div>

             </div>

         </div>

     </body>

 </html>

用JS实现省市二级联动的更多相关文章

  1. 用原生JS写省市二级联动

    HTML代码 <select id="s1"> <option value="0">~请选择省份~</option> < ...

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

    1.我们希望在注册页面中添加一个字段(籍贯),当用户选择一个具体的省份,在后面的下拉列表中动态加载该省份下所有的城市.显示的效果如下: 2.步骤分析: 第一步:确定事件(onchange)并为其绑定一 ...

  3. 省市二级联动--使用app-jquery-cityselect.js插件

    只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...

  4. 省市二级联动（原生JS）

    代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...

  5. js省市二级联动实例

    //动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  6. 微信小程序picker组件 - 省市二级联动

    picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...

  7. jQuery_完成省市二级联动

    当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...

  8. JavaScript 实现省市二级联动

    JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...

  9. Mybatis + js 实现下拉列表二级联动

    Mybatis + js 实现下拉列表二级联动 学习内容: 一.业务需求 二.实现效果 三.代码实现 1. province_city.jsp 2. TwoController 2. Province ...

随机推荐

  1. python开发进程：互斥锁（同步锁）&进程其他属性&进程间通信（queue）&生产者消费者模型

    一,互斥锁,同步锁 进程之间数据不共享,但是共享同一套文件系统,所以访问同一个文件,或同一个打印终端,是没有问题的, 竞争带来的结果就是错乱,如何控制,就是加锁处理 part1:多个进程共享同一打印终 ...

  2. python学习（五） 条件、循环和其他语句

    第五章 条件.循环和其他语句 5.1 print和import的更多信息 5.1.1 使用逗号输出 >>> print('age',43,45)         // 可以用逗号隔开 ...

  3. Python Twisted系列教程4：由Twisted支持的诗歌客户端

    作者:dave@http://krondo.com/twisted-poetry/  译者:杨晓伟(采用意译) 你可以在这里从头开始阅读这个系列. 第一个twisted支持的诗歌服务器 尽管Twist ...

  4. JAVA事件监听机制的实现

    今天学习了java的事件编程机制,略有体会,先在此记下心得. 第一,首先明确几个概念. 事件源:一个产生或者触发事件的对象.事件:承载事件源状态改变时的信息对象.事件监听器接口:实际上就是一个类,该类 ...

  5. python学习——练习题（3）

    """ 题目:一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少? """ import math d ...

  6. Java的Base64加密原理

    出自:   http://www.cnblogs.com/winner-0715/p/5920269.html http://www.cnblogs.com/koliop090/p/5203553.h ...

  7. MySQL OSC(在线更改表结构)原理

    1 OSC介绍 在我们的数据库操作中,更改表结构是一个常见的操作,而当我们的表数据量非常大时,我们更改表结构的时间是非 常的长,并且在跟改期间,会生成一个互斥锁,阻塞对整个表的所有操作,这样,对于我们 ...

  8. 【287】◀▶ arcpy 常用类说明

    ArcPy 类列表(按字母顺序) 01   Raster 创建一个可在 Python 脚本或地图代数表达式中使用的栅格对象. 02   Cursor Cursor 是一种数据访问对象,可用于在表中迭代 ...

  9. 如何上传网站程序（文件浏览器上传网页、FileZilla上传网站程序）

    问题场景: 网页制作完成后,程序需上传至虚拟主机. 注意事项: Windows系统的主机请将全部网页文件直接上传到FTP根目录,即 / . Linux系统的主机请将全部网页文件直接上传到 /htdoc ...

  10. google/dense_hash_map

    这个库使用时需要注意的地方: 1.在插入数据之前,需要先调用set_empty_key()设置一个空Key,Key的值可以为任意符合类型的.但请注意之后插入的Key不能和空Key相同,否则会abort ...