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

2、步骤分析：

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

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

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

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

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

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

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

第八步：创建option元素节点

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

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

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

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

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

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

         <style type="text/css">

             #contanier{

                 border: 1px solid red;

                 width: 99%;

                 height: 600px;

                 position: relative;

             }

             #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"/>

                             </td>

                         </tr>

                         <tr>

                             <td>密码</td>

                             <td>

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

                             </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>

                         <!--1.编写HTML文件部分的内容-->

                         <tr>

                             <td>籍贯</td>

                             <td>

                                 <!--2.确定事件，通过函数传参的方式拿到改变后的城市-->

                                 <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" align="center">

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

                             </td>

                         </tr>

                         </form>

                     </table>

                 </div>

             </div>

         </div>

     </body>

 </html>

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

JavaScript学习——使用JS完成省市二级联动的更多相关文章

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

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

  2. 用JS实现省市二级联动

    一.需求分析 我们希望在注册页面中添加一个字段(籍贯),当用户选择一个具体的省份,在后面的下拉列表中动态加载该省份下所有的城市.显示的效果如下: 二.技术分析 使用事件(onchange) 使用一个二 ...

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

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

  4. JavaScript 实现省市二级联动

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

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

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

  6. js省市二级联动实例

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

  7. jQuery_完成省市二级联动

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

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

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

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

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

随机推荐

  1. C# web api 中过滤器的使用

    一.开篇 Fiter在Web API中经常会用到,主要用于记录日志,安全验证,全局错误处理等:Web API提供两种过滤器的基本类型:actionfilterattribute,exceptionfi ...

  2. Javascript 正则表达式简述

    本文地址:http://www.cnblogs.com/blackmanba/p/regular-expressions-introduce.html 或者 http://forkme.info/re ...

  3. 洛谷P1291 [SHOI2002]百事世界杯之旅(期望DP)

    题目描述 “……在2002年6月之前购买的百事任何饮料的瓶盖上都会有一个百事球星的名字.只要凑齐所有百事球星的名字,就可参加百事世界杯之旅的抽奖活动,获得球星背包,随声听,更克赴日韩观看世界杯.还不赶 ...

  4. 【fiddler】 fiddler总是在菜单栏下面弹出提示“The system proxy was changed，click to reenable fiddler capture”--转

    源地址:http://blog.csdn.net/htdeyanlei/article/details/52873060 标签: fiddler 2016-10-20 15:28 2747人阅读 评论 ...

  5. 中国人自己的技术！百度开源自研底层区块链XuperChain

    中国人自己的技术!百度开源自研底层区块链XuperChain 近年来,我国各行各业迅猛发展,但不少尖端行业和产品仍然依赖进口,关键领域受制于人,火热的区块链领域也是如此. 在中国国际大数据产业博览会现 ...

  6. C语言基本语法——预处理器和预处理指令

    1.什么是预处理器 2.什么是预处理器指令 3.预处理器指令 4.宏指令 5.宏函数 6.宏函数的优缺点 7.条件编译指令 1.什么是预处理器 • 预处理器是一个程序,用来处理源程序中的预处理指令. ...

  7. [NOIP补坑计划]NOIP2016 题解&做题心得

    感觉16年好难啊QAQ,两天的T2T3是不是都放反了啊…… 场上预计得分:100+80+100+100+65+100=545(省一分数线280) ps:loj没有部分分,部分分见洛咕 题解: D1T1 ...

  8. There are multiple modules with names that only differ in casing.

    client?4c0e:153 ./src/components/Paginate.vue There are multiple modules with names that only differ ...

  9. css font-family 字体组

    介绍图片来自: http://www.runoob.com/cssref/css-websafe-fonts.html

  10. 变量命名规范及str类型

    变量命名规范: 1.单词之间用_分开 add_num() 2.全局变量,大写 PI,NUMBER() 3.实例变量,以_开头 _example() 4.私有实例变量 __private() 5.普通函 ...