<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script type="text/javascript" src="js/jquery.min.js">    </script>

        <script>

        $(function(){

            $("#provinceId").change(function(){

                var arr = [["郑州","开封","洛阳"],["济南","青岛","淄博"],["东城","西城","海淀"]];

                $("#cityId").html("<option>选择城市</option>")

                var index = this.selectedIndex;

                if(index != 0){

                     var citys = $.each(arr[index-1], function(i,obj) {

                     var $newOp = $("<option>"+obj+"</option>");

                     $("#cityId").append($newOp);

                    });

                }else{

                    $("#cityId").html("<option>选择---城市</option>")

                }

            });

        });

        </script>

    </head>

    <body>

        <div align="center">

        <select id="provinceId">

            <option>选择省份</option>

            <option>河南</option>

            <option>山东</option>

            <option>北京</option>

        </select>

        <select id="cityId">

            <option>选择城市</option>

        </select>

        </div>

    </body>

</html>

20行核心代码:jQuery实现省市二级联动的更多相关文章

  1. jquery 实现省市二级联动，附带完整的省市json数据 （粘贴即用）

    1.可以单独定义一个js,保存省市json数据. citydata = { "安徽": [ "合肥", "芜湖", "蚌埠&quo ...

  2. jquery 实现省市二级联动

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. jQuery_完成省市二级联动

    当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...

  4. 只有20行Javascript代码！手把手教你写一个页面模板引擎

    http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...

  5. 20行JS代码实现贪吃蛇

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 20行Python代码爬取王者荣耀全英雄皮肤

    引言王者荣耀大家都玩过吧,没玩过的也应该听说过,作为时下最火的手机MOBA游戏,咳咳,好像跑题了.我们今天的重点是爬取王者荣耀所有英雄的所有皮肤,而且仅仅使用20行Python代码即可完成. 准备工作 ...

  7. 省市二级联动（原生JS）

    代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...

  8. 微信小程序picker组件 - 省市二级联动

    picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...

  9. JavaScript 实现省市二级联动

    JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...

随机推荐

  1. Eclipse Dynamic Web Module 3.0 requires Java 1.6 or newer && Filter mapping specifies an unknown filter name characterEncodingFilter

    一直在宇宙最强的 IDE 下生长的,自然很难习惯 eclipse 这种开源且免费且各种版本且各种定制的 IDE 下没有少吃苦头. 最近用 maven 搭建了一个 springmvc/mybatis 的 ...

  2. LeetCode OJ：Binary Tree Right Side View（右侧视角下的二叉树）

    Given a binary tree, imagine yourself standing on the right side of it, return the values of the nod ...

  3. Codeforces Round #277.5 (Div. 2)D Unbearable Controversy of Being （暴力）

    这道题我临场想到了枚举菱形的起点和终点,然后每次枚举起点指向的点,每个指向的点再枚举它指向的点看有没有能到终点的,有一条就把起点到终点的路径个数加1,最后ans+=C(路径总数,2).每两个点都这么弄 ...

  4. javascript网页复制功能-复制到粘贴板-兼容多数浏览器(不使用flash)

    使用方法:clipBordCopy("hello Copy");//执行后复制hello Copy到粘贴板 通过 var result = clipBordCopy("h ...

  5. identityservice4使用案例

    一 使用缘由 最近写微服务的blog,研读了o’reilly出的 <building Microservices With Asp.net Core>,其中使用的微服务分布式权限组件是mi ...

  6. IntelliJ IDEA 代码检查规范QAPlug

    转自:http://blog.csdn.net/jizi7618937/article/details/51500725 Avoid Array Loops 数组之间的拷贝使用System.array ...

  7. java-04类和对象课堂练习

    1.请运行并输入以下代码,得到什么结果 public class Test { public static void main(String[] args){ Foo obj1=new Foo(); ...

  8. Long Jumps（二分查找lower_bound（）函数的运用）

    Valery is a PE teacher at a school in Berland. Soon the students are going to take a test in long ju ...

  9. $_validate 自动验证 字段是否重复

    1.在控制器里面实例化 数据表的时候用D方法,不要用M方法 2.在当前Admin下的Model里面建立一个自定义的Model AdminsController.class.php ========== ...

  10. Logstash详解之——input模块

    原文地址 Logstash由三个组件构造成,分别是input.filter以及output.我们可以吧Logstash三个组件的工作流理解为:input收集数据,filter处理数据,output输出 ...