1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script type="text/javascript" src="js/jquery.min.js">    </script>
  7.         <script>
  8.         $(function(){
  9.             $("#provinceId").change(function(){
  10.                 var arr = [["郑州","开封","洛阳"],["济南","青岛","淄博"],["东城","西城","海淀"]];
  11.                 $("#cityId").html("<option>选择城市</option>")
  12.                 var index = this.selectedIndex;
  13.                 if(index != 0){
  14.                      var citys = $.each(arr[index-1], function(i,obj) {
  15.                      var $newOp = $("<option>"+obj+"</option>");
  16.                      $("#cityId").append($newOp);
  17.                     });
  18.                 }else{
  19.                     $("#cityId").html("<option>选择---城市</option>")
  20.                 }
  21.             });
  22.         });
  23.         </script>
  24.     </head>
  25.     <body>
  26.         <div align="center">
  27.         <select id="provinceId">
  28.             <option>选择省份</option>
  29.             <option>河南</option>
  30.             <option>山东</option>
  31.             <option>北京</option>
  32.         </select>
  33.         <select id="cityId">
  34.             <option>选择城市</option>
  35.         </select>
  36.         </div>
  37.     </body>
  38. </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. ADO.NET异步操作测试

    配置文件: <?xml version="1.0"?> <configuration> <startup> <supportedRunti ...

  2. oralce 索引(2)

    B-Tree 索引 本文来自网上整理 来自以下博客内容 http://www.360doc.com/content/13/0712/11/13136648_299364992.shtml; http: ...

  3. redhat linux 中设置网卡固定ip

    更改 /etc/sysconfig/network-scripts/ifcfg-eth0(第一个网卡为eth0) DEVICE=eth0#网卡设备名称 ONBOOT=yes#启动时是否激活 yes | ...

  4. C#中的线程（二）线程同步

    C#中的线程(二)线程同步   Keywords:C# 线程Source:http://www.albahari.com/threading/Author: Joe AlbahariTranslato ...

  5. oracle decode函数 和 case when

    1.oracle decode分支函数 select decode(to_char(B.LQSJ, 'hh24:mi:ss'), '00:00:00', to_char(B.LQSJ, 'yyyy-m ...

  6. Python_单元测试工具nose

    一.nose的API nose的API地址:http://pythontesting.net/framework/nose/nose-introduction/ 二.安装nose 先用easy_ins ...

  7. Til the Cows Come Home （最短路模板题）

    个人心得:模板题,不过还是找到了很多问题,真的是头痛,为什么用dijkstra算法book[1]=1就错了..... 纠结中.... Bessie is out in the field and wa ...

  8. loj 6083.「美团 CodeM 资格赛」数码

    题目: 给定两个整数\(l\)和\(r\),对于任意\(x\),满足\(l\leq x\leq r\),把\(x\)所有约数写下来. 对于每个写下来的数,只保留最高位的那个数码.求\([1,9]\)中 ...

  9. python if语句，while语句

    一,if语句: python中最常用的判断语句,基本格式: 1.if else格式 if  条件: 结果 else: 结果 """ if 条件: 满足条件执行代码 els ...

  10. try catch(java)

    1 try.catch.finally语句中,在如果try语句有return语句,则返回的之后当前try中变量此时对应的值,此后对变量做任何的修改,都不影响try中return的返回值 2 如果fin ...