代码奉上:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>二级城市联动</title>
</head>
<body>
    <select id="one" onchange="func(this.value)">
        <option value="">--请选择--</option>
        <option value="0">浙江省</option>
        <option value="1">广东省</option>
        <option value="2">福建省</option>
    </select>
    <select id="two">
        <option value="">--请选择--</option>
    </select>
</body>
<script>
    var two = document.getElementById('two');
    city = [];//申明

　　//定义二级数据
    city[0] = ['杭州市'];
    city[1] = ['广州市'];
    city[2] = ['厦门市'];
    function func(m){
        two.length = 1;

　　　//遍历生产option选项
        for (var i = 0; i < city[m].length; i++) {

　　　　//创建一个option 把数据存储在option
            var op = new Option(city[m][i],i);

　　　　//把带有数据的option 添加到第二个select
            two.add(op);
        };
    }
</script>
</html>

简单 简单 简单 重要的事说三遍, 三级联动可以依葫芦画瓢写出来

JS中简单的二级城市联动的更多相关文章

  1. [转] JS中简单的继承与多态

    这里讲了一个最最最简单的JS中基于原型链的继承和多态. 先看一下以下这段代码的实现(A是“父类”,B是“子类”): var A = function(){ this.value = 'a'; this ...

  2. 老代码:js实现二级城市联动(MVC)

    FormViewCity 为mvc控制器传给view的数据,包括一个MyCitys集合字段. <%@ Page Title="" Language="C#" ...

  3. JS中简单的this学习

        我在学习JS初期,在使用this的时候经常出现问题,当然就是在现在,也有一些场景不能很好的明白this到底指代的是什么?看下面一个例子:   var x = 10; var foo = { x ...

  4. vue select二级城市联动及第二级默认选中第一个option值

    当二级联动比如选择国家的时候,希望选中一个国家的时候后面城市默认选中第一个城市,则给国家的select加一个@change事件就可以了 <div class="inputLine&qu ...

  5. 在JS中简单实现Formatter函数

    JS原生并没有提供方便使用的Formatter函数,用字符拼接的方式看起来混乱难读,而且使用起来很不方便.个人感觉C#里提供的语法比较好用,如: String.Format("Welcome ...

  6. JS中简单原型的使用

  7. js中简单操作

    去空格:ss.replace(/\s/g,""); 数组: 千万不能用in操作符 in 是说存不存在这个key而不是value! var a = [66,99,77]; 66 in ...

  8. 城市联动 - 自动生成SQL语句

    字段比较简单/  如果有需要可以自己定制字段和排序/ 一共二级城市联动, 本人业务需要, 所以就两层, 网上关于三层的挺多, 有需要可以借鉴/ 废话不多说, 先看效果图, 代码在下面 <?php ...

  9. 深入探究js中无所不在的this

    黄金守则: this对象是在运行时基于函数的执行环境绑定的:在全局函数中,this等于window而当函数被作为某个对象的方法调用时, this等于那个对象. 下面是一些相关实践: --------- ...

随机推荐

  1. [Swift]LeetCode684. 冗余连接 | Redundant Connection

    In this problem, a tree is an undirected graph that is connected and has no cycles. The given input ...

  2. FTP解决连接慢问题

    今天发现程序报登录FTP超时,于是便手动登录发现真的慢,于是网上搜便获取大招亲测有效,于是怕忘的我马上记录下来,zzzzzzz!! 如下解决 vim /etc/vsftpd/vsftpd.conf 在 ...

  3. Android 解压zip文件(支持中文)

    过了n多天后,当再次使用原先博客上写的那篇: Android 压缩解压zip文件 去做zip包的解压的时候,出现了原来没有发现的很多问题.首先是中文汉字问题,使用java的zip包不能很好的解决解压问 ...

  4. Kafka数据迁移

    1.概述 Kafka的使用场景非常广泛,一些实时流数据业务场景,均依赖Kafka来做数据分流.而在分布式应用场景中,数据迁移是一个比较常见的问题.关于Kafka集群数据如何迁移,今天笔者将为大家详细介 ...

  5. Nagios 监控系统架构

    Nagios 监控系统架设全攻略 简介: Nagios 全名为(Nagios Ain’t Goona Insist on Saintood),最初项目名字是 NetSaint.它是一款免费的开源 IT ...

  6. 隔离 docker 容器中的用户

    笔者在前文<理解 docker 容器中的 uid 和 gid>介绍了 docker 容器中的用户与宿主机上用户的关系,得出的结论是:docker 默认没有隔离宿主机用户和容器中的用户.如果 ...

  7. Aooms_微服务基础开发平台实战_001_开篇

    一.引子 “ 微服务”近年来很火的一个词,如今的热度不亚于当年的SSH组合,各种开发框架.中间件.容器.概念层出不穷. 比如:dubbo.motan.zookeeper.springboot.spri ...

  8. 第8章 概述 - Identity Server 4 中文文档(v1.0.0)

    快速入门提供了各种常见IdentityServer方案的分步说明.他们从基础到复杂 - 建议您按顺序完成它们. 将IdentityServer添加到ASP.NET Core应用程序 配置Identit ...

  9. C#工具:CSV文件转换帮助类

    CSV是逗号分隔值格式的文件,其文件以纯文本形式存储表格数据(数字和文本).CSV文件由任意数目的记录组成,记录间以某种换行符分隔:每条记录由字段组成,字段间的分隔符是其它字符或字符串,最常见的是逗号 ...

  10. JS闭包作用域解析

    什么是闭包? 简单理解,当在一个函数的外部访问函数内部定义的变量的时候就会形成一个闭包,由这个理解可以知道,当一个函数执行完成的时候,一般情况下,其作用域会被销毁,其内部定义的变量也会变得不可访问,所 ...