代码：

<!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. 一个MySQL-JDBC驱动bug引起的血案……

    问题背景 公司是做电商系统的,整个系统搭建在华为云上.系统设计的时候,考虑到后续的用户和订单数量比较大,需要使用一些大数据库的组件.关系型数据库这块,考虑到后续数据量的快速增长,不是直接写入MySQL ...

  2. POJ 2367 Genealogical tree 拓扑题解

    一条标准的拓扑题解. 我这里的做法就是: 保存单亲节点作为邻接表的邻接点,这样就非常方便能够查找到那些点是没有单亲的节点,那么就能够输出该节点了. 详细实现的方法有非常多种的,比方记录每一个节点的入度 ...

  3. python 文档生成 字符串替换

    替换 fnr, fnr_source, fnw = 'my.py.html', '产品清单.txt', 'my.py.res.html'd_source = {}with open(fnr_sourc ...

  4. IE浏览器 多版本之间切换

    由于Win7系统最低支持IE8的版本,不能通过安装IE7版本来达到要求. 有一个替代方案,通过IE自带Emulation来实现,实现步骤如下: 打开现有的IE浏览器 按下F12键 切换到“Emulat ...

  5. Linux 用户管理(1) (/etc/passwd)

    Linux所有的用户都在/etc/passwd文件里面. 1.为什么需要用户 1)计算机及网络资源的合理分配  2)可以控制用户访问系统的权限.3)身份认证 4) 进程 以某个用户的身份来运行 2.用 ...

  6. codevs1154能量项链（环形dp，区间dp）

    1154 能量项链 2006年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold     题目描述 Description 在Mars星球上 ...

  7. Gson 转日期中的错误

    今天在用Gson做json转化是遇到一个问题,本地执行没有问题(windows 7),包丢到服务器上(Centos)就报错了. 后经分析发现DateTypeDapter类中取本地环境的日期格式参考ht ...

  8. ZOJ1969-Hard to Believe, but True!

    import re while True: x = raw_input() if(x == '0+0=0'): print 'True' break a,b,c = re.split('[+=]', ...

  9. linux 防火墙关闭

     systemctl status firewalld.servicesystemctl status iptables.service关闭防火墙,selinux15:54:43运维-李浩 2017/ ...

  10. BZOJ 4304 tarjan+topsort+bitset

    我就是想骗一骗访问量 先Tarjan搞出来所有的强连通分量 正向连边 反向连边 topsort一发  搞出来每个点可以到哪些点 和哪些点可以到这个点 对于每条边 与一下  就是答案 //By Siri ...