<!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. Hive mapreduce SQL实现原理——SQL最终分解为MR任务，而group by在MR里和单词统计MR没有区别了

    转自:http://blog.csdn.net/sn_zzy/article/details/43446027 SQL转化为MapReduce的过程 了解了MapReduce实现SQL基本操作之后,我 ...

  2. vue项目组件的全局注册

    在vue-cli项目中,我们经常会封装自己的组件,并且要在多个界面中引用它,这个时候就需要全局注册组件. 首先我们会封装自己的组件,比如twoDimensionTable文件夹下的index.vue: ...

  3. nyoj-158-省赛来了（组合数）

    题目链接 /* Name:nyoj-158-省赛来了 Copyright: Author: Date: 2018/4/25 17:07:22 Description: 暴力,秒天秒地 */ #incl ...

  4. (转)libcurl库使用方法，好长，好详细。

    一.ibcurl作为是一个多协议的便于客户端使用的URL传输库,基于C语言,提供C语言的API接口,支持DICT, FILE, FTP, FTPS, Gopher, HTTP, HTTPS, IMAP ...

  5. python使用 db.select 返回的数据只能遍历一次

    python中通过find从mongo中查出的数据,或者通过select返回的数据,其实返回的是游标,当你进行便利一次之后,游标指向最后, 所以当你再一次进行便利时,便出现数据为空的现象. 解决办法: ...

  6. Ubuntu16.04上安装搜狗输入法

    一.下载搜狗输入法的deb包: http://pinyin.sogou.com/linux/ 二.打开终端输入命令: $ sudo dpkg -i sogoupinyin_2.0.0.0078_i38 ...

  7. java06-数组动手动脑

    1.阅读QiPan.java示例程序了解如何利用二维数组和循环语句绘制五子棋盘. 定义了一个私有的二维数组作为棋盘.并定义了长度.之后打印符号使之连接起来作为棋盘在控制台显示.建立缓冲区用来读取输入的 ...

  8. [Luogu4177][CEOI2008]order

    luogu sol 这题有点像网络流24题里面的太空飞行计划啊. 最大收益=总收益-最小损失. 先令\(ans=\sum\)任务收益. 源点向每个任务连容量为收益的边. 每个机器向汇点连容量为购买费用 ...

  9. C#程序性能优化

    http://blog.csdn.net/scalzdp/article/details/34421639 程序中我们每一丝动作都会加大程序运行的负担,当刚开始学习程序的时候常常不会去考虑程序运行的效 ...

  10. Message类的属性Msg所关联的消息ID

    在做C#的Message消息处理的时候,用到了消息的msg编号不知道对应的是什么事件,所以才从网上找来资料如下,在文章最后我会给出资料的出处的. WM_NULL=0x0000 WM_CREATE=0x ...