代码奉上:

<!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]LeetCode729. 我的日程安排表 I | My Calendar I

    Implement a MyCalendar class to store your events. A new event can be added if adding the event will ...

  2. AES，DES加密JS源文件及其使用方法

    源文件地址:https://github.com/dididi1234/crypto 进入之后直接下载CryptoJS.js,js中直接引用,小程序也一样可以使用 具体使用方法和vue中的Crypto ...

  3. github pages绑定域名

    网上很多人问 github 绑定域名要不要备案,很多人的回答是: 国内主机需要备案,国外主机不用 这个说法是没错的,但是却没有直接回答出 github pages 是否需要备案! 首先声明 githu ...

  4. IdentityServer4实战 - 谈谈 JWT 的安全策略

    一.前言 众所周知,IdentityServer4 默认支持两种类型的 Token,一种是 Reference Token,一种是 JWT Token .前者的特点是 Token 的有效与否是由 To ...

  5. 可视化面板LogDashboard使用log4net源

    logdashboard现已支持log4net文件源,本示例源码在 https://github.com/liangshiw/LogDashboard/tree/master/samples/UseL ...

  6. 如何把你的.net程序打包上传到nuget

    写在前面 每个.net开发者都经常用nuget管理自己的程序包,install一个json组件啊,一个工具类什么的,这些都是别人写好的.如果我也写好了一个自己感觉很拿的出手的组件,想轻松的使用nuge ...

  7. 【ASP.NET Core快速入门】（十三）Individual authentication 模板、EF Core Migration

    Individual authentication 模板 我们首先用VSCode新建一个mvc的网站,这个网站创立的时候回自动为我们创建Identuty Core以及EF Core的代码示例,我们可以 ...

  8. Java开发知识之XML文档使用,解析

    目录 XML文件详解 一丶XML简介 1.文档结构 2.XML中的元素(Element)或者叫做标签(Tab).属性 文本内容. 节点(Node) 3.XML语法规则 二丶XML文档解析 三丶使用XP ...

  9. 使用MaxCompute Java SDK运行安全相关命令

    使用MaxCompute Console的同学,可能都使用过MaxCompute安全相关的命令.官方文档上有详细的MaxCompute安全指南,并给出了安全相关语句汇总.   简而言之,权限管理.列级 ...

  10. Spring Boot (十)：邮件服务

    Spring Boot 仍然在狂速发展,才几个多月没有关注,现在看官网已经到 2.1.0.RELEASE 版本了.准备慢慢在写写 Spring Boot 相关的文章,本篇文章使用 Spring Boo ...