代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>两级联动</title>

    <script>

        //准备数据

        var provinces = [

            ["深圳市", "东莞市", "惠州市", "广州市"],

            ["长沙市", "岳阳市", "株洲市", "湘潭市"],

            ["厦门市", "福州市", "漳州市", "泉州市"]

        ];

        /*

            1. 确定事件: onchange

            2. 函数: selectProvince()

            3:

               得到当前操作元素

               得到当前选中的是那一个省份

               从数组中取出对应的城市信息

               动态创建城市元素节点

               添加到城市select中

        */

        function selectProvince() {

            var province = document.getElementById("province");

            //得到当前选中的是哪个省份

            var value = province.value;

            //从数组中取出对应的城市信息

            var cities = provinces[value];

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

            //清空select中的option

            citySelect.options.length = 0;

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

                var cityText = cities[i];

                //动态创建城市元素节点 <option>东莞市</option>

                //创建option节点

                var option1 = document.createElement("option"); //<option></option>

                //创建城市文本节点

                var textNode = document.createTextNode(cityText);//东莞市

                //将option节点和文本内容关联起来

                option1.appendChild(textNode);  //<option>东莞市</option>

                //添加到城市select中

                citySelect.appendChild(option1);

            }

        }

    </script>

</head>

<body>

<form action="">

    <!--选择省份-->

    <label for="province"></label>

    <select onchange="selectProvince()" id="province">

        <option value="-1">--请选择--</option>

        <option value="0">广东省</option>

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

        <option value="2">福建省</option>

    </select>

    <!--选择城市-->

    <label for="city"></label>

    <select id="city"></select>

</form>

</body>

</html>

JS练习：两级联动的更多相关文章

  1. JS 省市两级联动（不带地区版本）

    基于网上找的一个版本改造,因为项目需求不需要地区只要省.市,所以做了改版,两个input上直接取出了数据 <html> <head> <script src=" ...

  2. ajax实现无刷新两级联动DropDownList

    ajax实现的无刷新三级联动 http://zhangyu028.cnblogs.com/articles/310568.html 本文来自小山blog:http://singlepine.cnblo ...

  3. Combobox下拉框两级联动

    下拉框的两级联动是我们开发中经常遇到一种情况.比如一个学生管理系统中,根据年级.科目及姓名查询学生考试成绩,年级和科目都是硬盘中的有限数据(数据库)而学生则可以有用户手动指定,这时在数据库中有年级和科 ...

  4. 【分享】纯js的n级联动列表框 —— 基于jQuery，支持下拉列表框和列表框，最重要的是n级，当然还有更重要的

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...

  5. Jquery实现两级联动

    最后结果如下: 关键代码如下: <select name="customerCondition['credibilityBegin']" id="credibili ...

  6. 纯js的N级联动列表框 —— 基于jQuery

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...

  7. ASP_NET实现界面无刷新的DropdownList两级联动效果

    所谓DropdownList联动,也就是在选一个DropdownList的时候使另外一个DropdownList的内容更新(如选省份时显示所属城市),按常规的方法那就是在第一个DropdownList ...

  8. Thinkphp 两级联动

    <!-- 前端代码部分--><div class="pop-movegroup" id="salesmanBox"> <dl> ...

  9. ajax_get/post_两级联动

    使用ajax实现菜单联动 通常情况下,GET请求用于从服务器上获取数据,POST请求用于向服务器发送数据. 需求:选择第一个下拉框的值,根据第一个下拉框的值显示第二个下拉框的值 首先使用GET方式. ...

随机推荐

  1. 全然卸载oracle11g步骤

    iLife's 博客http://blog.csdn.net/fei1502816 全然卸载oracle11g步骤: 1. 開始->设置->控制面板->管理工具->服务 停止全 ...

  2. 快学Scala习题解答—第十章 特质

    10 特质 10.1 java.awt.Rectangle类有两个非常实用的方法translate和grow,但可惜的是像java.awt.geom.Ellipse2D这种类没有. 在Scala中,你 ...

  3. TLabel和TEdit的初次显示过程

    procedure TForm1.Button2Click(Sender: TObject); var l: TLabel;begin l:=TLabel.Create(self); l.Name:= ...

  4. new (C# Reference)

    https://msdn.microsoft.com/en-us/library/51y09td4.aspx In C#, the new keyword can be used as an oper ...

  5. SQL使用IN参量不能超过1000的表现形式以及解决办法

    如果出现这个错误说明你传的参量是超过了一千个值:列如,你拼接了1001个id: 如何解决那,我这里提供两种方法: 1.每1000条加一个or in 列: 原:select p.* from t_pre ...

  6. Django - 自定义请求头

    收藏一下以后学习 博客搬运地址 Django接收自定义http header(转)

  7. 《Akka应用模式：分布式应用程序设计实践指南》读书笔记9

    性能 这也是一个比较大的问题,因为性能不一定是Akka本身的问题,还可能是你代码写的有问题. 优化的第一步就是找出性能的瓶颈,隔离出应用程序里面比较耗时的部分,然后尝试对其优化,减少需要耗费的时间成本 ...

  8. MAC应用无法打开或文件损坏的处理方法

    在MAC下安装一些软件时提示"来自身份不明开发者",其实这是MAC新系统启用了新的安全机制.默认只信任 Mac App Store 下载的软件和拥有开发者 ID 签名的应用程序.换 ...

  9. ACM_百度的面试（单调栈）

    百度的面试 Time Limit: 2000/1000ms (Java/Others) Problem Description: 在一个二维平面,从左到右竖立n根高度分别为:a[1],a[2],... ...

  10. Http协议详解（转）>>>写的很好

    声明:本片文章非原创,仅供自己学习并分享 内容来源于博客园作者MIN飞翔的HTTP协议详解地址http://www.cnblogs.com/EricaMIN1987_IT/p/3837436.html ...