本案例很常用，应用场景：注册页面填写籍贯，省市二级联动

总体思想：创建一个二维数组存入省市，获取选中的省份并比较，创建标签遍历添加

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

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

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

                        </td>

                    </tr>

                    <tr>

                        <td colspan="2">

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

                        </td>

                    </tr>

                </form>

            </table>

        </div>

    </body>

</html>

效果：

这里如果选择了湖北，后边下拉框的内容就会自动变成相应的城市

JS应用实例6：二级联动的更多相关文章

  1. js小例子之二级联动

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

  2. 纯js做的select二级联动

    分步阅读 select 联动用到的范围很广,下面介绍一下简单的二级联动 方法/步骤   做一个简单的html页面,用于显示select联动,如图所示:   设置js,点击一级选择项时,创建其下对应的二 ...

  3. JS实现下拉列表的二级联动

    这个是简单也是最基本的下拉框联动的示例,这个示例主要针对那些只有二级联动,且第一级是固定的选项,第二级的内容也比较简单,不刷新的联动,动态的联动需要检索数据库,这个对不需要更新的二级联动比较实用.这里 ...

  4. jQuery下拉列表二级联动插件

    jQuery下拉列表二级联动插件的视图代码: <!doctype html> <html lang="en"> <head> <meta ...

  5. js省市二级联动实例

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

  6. Query实例的ajax应用之二级联动的后台是采用php来做的

    jQuery实例的ajax应用之二级联动的后台是采用php来做的,前台通过jquery的ajax方式实现二级联动数据库表设计 csj_trade id int(11) auto_increment  ...

  7. xml+js+html的二级联动

    首先需要准备的文档是: cities.xml //主要是标注中国各省及其各省下的各个城市 内容如下: <?xml version="1.0" encoding="U ...

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

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

  9. 原生js二级联动

    今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. 1 //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement(& ...

随机推荐

  1. maven pom.xml 项目报错

    Failed to read artifact descriptor for org.springframework.boot:spring-boot-starter-web:jar:2.1.0.RE ...

  2. 从零开始学spring cloud(一) -------- spring cloud 简介

    1.微服务简介 1.1.单体架构 一个归档包(例如war格式)包含了应用所有功能的应用程序,我们通常称之为单体应用.架构单体应用的方法论,我们称之为单体应用架构. 缺点:1. 复杂性高以笔者经手的一个 ...

  3. python深入理解类和对象

    1,鸭子类型和多态 当看到一只鸟走起来像鸭子,游泳起来像鸭子,叫起来也像鸭子,那这只鸟就是鸭子 是不是比较混乱,看个例子: # -*- coding:UTF-8 -*- __autor__ = 'zh ...

  4. linux用户和组管理，/etc/passwd 、/etc/shadow和/etc/group --学习

    一./etc/passwd 和/etc/shadow解释 与用户相关的系统配置文件主要有/etc/passwd 和/etc/shadow,其中/etc/shadow是用户资讯的加密文件,比如用户的密码 ...

  5. Python开发——数据结构【深浅拷贝】

    浅拷贝 # 浅拷贝只copy一层 s = [3,'Lucy',4,[1,2]] s1 = s.copy() 深拷贝 # 深拷贝——克隆一分 import copy s = [3,'Lucy',4,[1 ...

  6. angular2 学习

    一,angular2脚手架搭建 1,安装node 2,安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 3,搭 ...

  7. rsyslog和logrotate

    简介 rsyslog 是一个 syslogd 的多线程增强版. 现在Fedora和Ubuntu, rhel6默认的日志系统都是rsyslog了 rsyslog负责写入日志, logrotate负责备份 ...

  8. C++学习札记（3）

    一边听着许巍的音乐,一遍学习着C++的精髓,这感觉这酸爽,我一个人体会和知道. 许巍是两代人共同的时代标志,他的音乐作品脍炙人口,堪称经典,经久不衰:此时此刻品味,依然有丰富的各种味道和感情.可能因为 ...

  9. Web 研发模式的演变

    前不久徐飞写了一篇很好的文章:Web 应用的组件化开发.本文尝试从历史发展角度,说说各种研发模式的优劣. 一.简单明快的早期时代 可称之为 Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 ...

  10. [SoapUI] 检查测试步骤的类型或者或者某种特定类型的步骤列表

    SoapUI Groovy : Check if test step is of specific type, such as : Wsdl, Rest, Jdbc, HTTP, Groovy etc ...