<!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. mysql分组取topn

    本文来自  http://www.jb51.net/article/31590.htm 有些语句sql top n 是sqlserver语法 --按某一字段分组取最大(小)值所在行的数据 代码如下: ...

  2. hdoj-3791-二叉搜索树(二叉搜索树模板题)

    #include <cstring> #include <cstdio> #include <iostream> using namespace std; type ...

  3. python数据类型、操作符

    python中数据类型包含:int,float,boolean,string,list(列表),set(集合),dictionary(字典) 数据类型转换: ①字符串 转 int:>>&g ...

  4. BZOJ5118：Fib数列2（O1快速模）

    题意:输入N,输出fib(2^N)%1125899839733759.(P=1125899839733759是素数) 思路:欧拉降幂,因为可以表示为矩阵乘法,2^N在幂的位置,矩阵乘法也可以降幂,所以 ...

  5. LeetCode Largest Palindrome Product

    原题链接在这里:https://leetcode.com/problems/largest-palindrome-product/description/ 题目: Find the largest p ...

  6. git统计当前分支提交次数

    切换到您要统计的分支,然后Git Bash here,执行如下代码即可 : git log --author="您的用户名" --since='开始日期' --oneline | ...

  7. [转] 如何用BSP树生成游戏地图

    作者:Timothy Hely 当用对象随机填充某个区域如地下城中的房间时,你可能会遇到的问题是太过随机,导致分布疏密不均或混乱.在本教程中,我将告诉大家如何使用二进制空间划分法(游戏邦注:即Bina ...

  8. SOA、微服务与服务网格

    SOA架构解析 SOA 全称是: Service Oriented Architecture,中文释义为 “面向服务的架构”,它是一种设计理念,其中包含多个服务, 服务之间通过相互依赖最终提供一系列完 ...

  9. oracle中merge的用法，以及各版本的区别 Create

    Merge是一个非常有用的功能,类似于Mysql里的insert into on duplicate key. Oracle在9i引入了merge命令,通过这个merge你能够在一个SQL语句中对一个 ...

  10. [转]A记录和CNAME记录的区别

    1.什么是域名解析? 域名解析就是国际域名或者国内域名以及中文域名等域名申请后做的到IP地址的转换过程.IP地址是网路上标识您站点的数字地址,为了简单好记,采用域名来代替ip地址标识站点地址.域名的解 ...