代码奉上:

<!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]LeetCode932. 漂亮数组 | Beautiful Array

    For some fixed N, an array A is beautiful if it is a permutation of the integers 1, 2, ..., N, such ...

  2. [Abp 源码分析]十一、权限验证

    0.简介 Abp 本身集成了一套权限验证体系,通过 ASP.NET Core 的过滤器与 Castle 的拦截器进行拦截请求,并进行权限验证.在 Abp 框架内部,权限分为两块,一个是功能(Featu ...

  3. 初识Shiro

    Shiro是Apache基金会下的一个开源安全框架,提供了身份验证.授权.密码学和会话管理等功能,Shiro框架不仅直观易用,而且也能提供健壮的安全性,另外一点值得说的是Shiro的前身是一个始于20 ...

  4. Educational Codeforces Round 48 (Rated for Div. 2)——A. Death Note ##

    A. Death Note time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  5. 简单的SQL注入

    Topic Link http://ctf5.shiyanbar.com/423/web/ 1)测试输入1的时候正常显示 2) 单引号测试输入1'发现存在漏洞(判断为字符型注入) 3) 联合注入测试( ...

  6. 一文带你看透kubernetes 容器编排系统

    本文由云+社区发表 作者:turboxu Kubernetes作为容器编排生态圈中重要一员,是Google大规模容器管理系统borg的开源版本实现,吸收借鉴了google过去十年间在生产环境上所学到的 ...

  7. java集合框架容器 java框架层级 继承图结构 集合框架的抽象类 集合框架主要实现类

    本文关键词: java集合框架  框架设计理念  容器 继承层级结构 继承图 集合框架中的抽象类  主要的实现类 实现类特性   集合框架分类 集合框架并发包 并发实现类 什么是容器? 由一个或多个确 ...

  8. 浅谈RNN、LSTM + Kreas实现及应用

    本文主要针对RNN与LSTM的结构及其原理进行详细的介绍,了解什么是RNN,RNN的1对N.N对1的结构,什么是LSTM,以及LSTM中的三门(input.ouput.forget),后续将利用深度学 ...

  9. Docker日志管理--docker部署安装ELK (十一）--技术流ken

    Docker logs 对于一个运行的容器,Docker 会将日志发送到 容器的 标准输出设备(STDOUT)和标准错误设备(STDERR),STDOUT 和 STDERR 实际上就是容器的控制台终端 ...

  10. MEF 基础简介 三

    MEF导出类的方法和属性 首先来说导出属性,因为这个比较简单,和导出类差不多,先来看看代码,主要看我加注释的地方,MusicBook.cs中的代码如下: using System; using Sys ...