<!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. linux下的第一个C程序及其编译方法

    #include <stdio.h> #include <stdlib.h>   int main(int argc, char ** argv) {     printf(& ...

  2. 《Javascript高级程序设计》阅读记录（三）：第五章 上

    这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 这个系列,我会把阅读< ...

  3. [转]html5 video在安卓大部分浏览器包括微信最顶层的问题

    能否解决video标签置顶的问题?答案是:不行的. 具体可查看官方解释:http://x5.tencent.com/guide?id=2009 //====================201604 ...

  4. bzoj 5092 [Lydsy1711月赛]分割序列——高维前缀和

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=5092 套路地弄一个前缀异或和,就变成 f[ i ]=max_{j=0}^{i} { s[ j ...

  5. （1）java8初体验

    很多博客都拿Comparator,我也贴一下吧. java8以前的匿名内部类用来排序. //匿名内部类 @Test public void java8Test() { Person p1 = new ...

  6. java代码继承。。。找出不能继承父类方法的问题

    总结:当子类中没有定义name属性时,在子类的无参构造方法中,父类的姓名是不能被继承的. 输出的结果是,子类无参构造方法里的属性值,也就是是属 控制台显示: 我叫:周杰伦,今年:2岁我的姓名:周杰伦, ...

  7. java添加背景图片

    总结:我们通常实现添加背景图片很容易,但是再添加按钮组件就会覆盖图片.原因是: 有先后啊.setlayout();与布局有很大关系 请调试代码的时候,仔细揣摩.我晕了 还可以添加文本框,密码框 fra ...

  8. POJ 3624 Charm Bracelet（01背包模板）

    Charm Bracelet Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 45191   Accepted: 19318 ...

  9. mariaDB 安装/卸载+启动/关闭 服务

    1.设置环境变量 无论是用户环境变量还是系统环境变量 2.启动服务 进入根目录 名字根据 --install 后的 参数来决定 叫MariaDB,MySQL 都可以 mysqld.exe --inst ...

  10. 【转】href="#"与"javascript:void(0);"的区别

    在工作中,如果我们想把a标签中的链接置成空链接,我们一般会用两种方法: 1 <a href="#" target="_blank"></a&g ...