代码奉上:

<!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. PHP算法之选择排序

    //选择排序 $array = [10,203,30,2,4,43]; //第一次从下标为0的开始下标为0的这个数与后面的n-1个进行比较:找出最小或者最大的放在下标为0的这个位置; //第二次从下标 ...

  2. [IOI2007] sails 船帆

    显然答案与杆的顺序无关(按每个高度考虑). 从高到低考虑杆,设此时的状态为\(S\),\(S[i]\)是高度\(i\)的帆的数目,初始全为\(0\),当前杆的高度为\(h\),杆上需要放置的帆的数目为 ...

  3. Ceres配置（vs2013+Win10）

    主要参考文:Ceres Solver 在Windows下安装配置笔记 eigen.gflags.glog.suitesparse按照上面的链接中的指导配置即可. 配置ceres的时候,按照上面的链接内 ...

  4. Vue轻松入门,一起学起来！

    我们创建一个项目,这个项目我们细说Vue. 一.如何在项目中添加模块 我们通过npm 进行 安装 模块. 首先我们通过cmd.exe cd进入你的项目根目录,必须存在package.json文件,安装 ...

  5. 补习系列(7)-springboot 实现拦截的五种姿势

    目录 简介 姿势一.使用 Filter 接口 1. 注册 FilterRegistrationBean 2. @WebFilter 注解 姿势二.HanlderInterceptor 姿势三.@Exc ...

  6. .NET快速信息化系统开发框架 V3.2->Web版本新增“文件管理中心”集上传、下载、文件共享等一身，非常实用的功能

    文件中心是3.2版本开始新增的一个非常实用功能,可以归档自己平时所需要的文件,也可以把文件分享给别人,更像一个知识中心.文件中心主界面如下图所示,左侧“我的网盘”展示了用户对文件的分类,只能自己看到, ...

  7. Linux 项目上线管理 MAVEN + expect 一台机器管理所有机器的应用程序

    一.目的 在一台服务器上面管理所有机器的应用程序. 设想是通过一条命令能够知道所有应用程序是否running 如果not running 查看具体项目的log 跟踪具体原因,程序问题汇报相关负责人 二 ...

  8. 强大的jupyter，python开发者的福音

    jupyter是一种交互式计算和开发环境的笔记,ipython命令行比原生的python命令行更加友好和高效,还可以运行web版的界面,支持多语言,输出图形.音频.视频等功能. 一.安装 pip3 i ...

  9. python 使用 thrift 教程

    一.前言: Thrift 是一种接口描述语言和二进制通信协议.以前也没接触过,最近有个项目需要建立自动化测试,这个项目之间的微服务都是通过 Thrift 进行通信的,然后写自动化脚本之前研究了一下. ...

  10. Mysql 主键如何实现持久化

    自增主键没有持久化是个比较早的bug,这点从其在官方bug网站的id号也可看出(https://bugs.mysql.com/bug.php?id=199) 首先,我们可以直观的重现如下. mysql ...