1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>selectList</title>
  6. <style type="text/css">
  7.     *{margin:0;padding:0;}
  8.     .selectList{width:200px;margin:50px auto;}
  9. </style>
  10. <script type="text/javascript" src="jquery.js"></script>
  11. <script type="text/javascript" src="area.js"></script>
  12. <style type="text/css">
  13.     .selectList select{
  14.         float:left;
  15.     }
  16. </style>
  17. </head>
  18. <body>
  19.     <div class="selectList">
  20.         <select class="province">
  21.             <option>请选择</option>
  22.         </select>
  23.         <select class="city">
  24.             <option>请选择</option>
  25.         </select>
  26.         <select class="district">
  27.             <option>请选择</option>
  28.         </select>
  29.     </div>
  30.     <script type="text/javascript">
  31.     $(function(){
  32.         $(".selectList").each(function(){
  33.             var temp_html;
  34.             var oProvince = $(this).find(".province");
  35.             var oCity = $(this).find(".city");
  36.             var oDistrict = $(this).find(".district");
  37.             //初始化省
  38.             var province = function(){
  39.                 $.each(areaJson,function(i,province){
  40.                     temp_html+="<option value='"+province.p+"'>"+province.p+"</option>";
  41.                 });
  42.                 oProvince.html(temp_html);
  43.                 city();
  44.             };
  45.             //赋值市
  46.             var city = function(){
  47.                 temp_html = "";
  48.                 var n = oProvince.get(0).selectedIndex;
  49.                 $.each(areaJson[n].c,function(i,city){
  50.                     temp_html+="<option value='"+city.ct+"'>"+city.ct+"</option>";
  51.                 });
  52.                 oCity.html(temp_html);
  53.                 district();
  54.             };
  55.             //赋值县
  56.             var district = function(){
  57.                 temp_html = "";
  58.                 var m = oProvince.get(0).selectedIndex;
  59.                 var n = oCity.get(0).selectedIndex;
  60.                 if(typeof(areaJson[m].c[n].d) == "undefined"){
  61.                     oDistrict.css("display","none");
  62.                 }else{
  63.                     oDistrict.css("display","inline");
  64.                     $.each(areaJson[m].c[n].d,function(i,district){
  65.                         temp_html+="<option value='"+district.dt+"'>"+district.dt+"</option>";
  66.                     });
  67.                     oDistrict.html(temp_html);
  68.                 };
  69.             };
  70.             //选择省改变市
  71.             oProvince.change(function(){
  72.                 city();
  73.             });
  74.             //选择市改变县
  75.             oCity.change(function(){
  76.                 district();
  77.             });
  78.              province();
  79.         });
  80.     });
  81.     </script>
  82. </body>
  83. </html>

area.js

  1. var areaJson=
  2. [
  3.     {"p":"请选择",
  4.     "c":[
  5.         {"ct":"请选择",
  6.         "d":[
  7.             {"dt":"请选择"},
  8.         ]}
  9.     ]},
  10.     {"p":"江西省",
  11.     "c":[
  12.         {"ct":"南昌市",
  13.         "d":[
  14.             {"dt":"西湖区"},
  15.             {"dt":"东湖区"},
  16.             {"dt":"高新区"}
  17.         ]},
  18.         {"ct":"赣州市",
  19.         "d":[
  20.             {"dt":"瑞金县"},
  21.             {"dt":"南丰县"},
  22.             {"dt":"全南县"}
  23.         ]}
  24.     ]},
  25.     {"p":"北京",
  26.     "c":[
  27.         {"ct":"东城区"},
  28.         {"ct":"西城区"}
  29.     ]},
  30.     {"p":"河北省",
  31.     "c":[
  32.         {"ct":"石家庄",
  33.         "d":[
  34.             {"dt":"长安区"},
  35.             {"dt":"桥东区"},
  36.             {"dt":"桥西区"}
  37.         ]},
  38.         {"ct":"唐山市",
  39.         "d":[
  40.             {"dt":"滦南县"},
  41.             {"dt":"乐亭县"},
  42.             {"dt":"迁西县"}
  43.         ]}
  44.     ]}
  45. ]

select实现三级联动的更多相关文章

  1. 利用select实现年月日三级联动的日期选择效果

    × 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...

  2. 简单jquery实现select三级联动

    简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...

  3. jquery select选中表单特效三级联动

    好久没发帖了,今天发一个jquery select的表单三级联动,希望能对有需要的朋友有点帮助. js代码,当然还要加上jquery的包,应该都有的,这里就不发了. <script type=& ...

  4. jQuery实现select三级联动

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  5. Jquery select 三级联动 (需要JSON数据)

    Scripts/Category.js //Jquery三级类别联动 $(function () { BindCategory(); }) function BindCategory() { var ...

  6. js封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

  7. jQuery - 全国省市县三级联动

    最近有空用jquery做了一个全国省市县的三级联动,在以后或许可以用的到 ,遗憾的是我还没用封装,等有空看能不能封装成一个插件 废话不多说,贴上代码: <!doctype html> &l ...

  8. webForm（三）——三级联动

    三级联动 首先附图一张,初步认识一下什么是三级联动:                           注:选第一个后面两个变,选第二个,最后一个改变. 其次,做三级联动需要注意的方面:①DropD ...

  9. C#三级联动

    1.运用ComboBox的控件建立效果,如右图: 2.建立三个表,第一个Province表: PID,PName;第二个为city表: CId,CName,PId;第三个为coun表:CounID,C ...

随机推荐

  1. mxonline实战7，模板继承和模板标签

        对应github地址:https://github.com/pshyms/django/tree/master/mxonline/7_day     一. 定制不同页面中样式相同,内容不同的模 ...

  2. QuantLib 金融计算——收益率曲线之构建曲线（2）

    目录 QuantLib 金融计算--收益率曲线之构建曲线(2) YieldTermStructure 问题描述 Piecewise** 分段收益率曲线的原理 Piecewise** 对象的构造 Fit ...

  3. 必须声明表变量 "@P0"

    mybatis提示错误 ### Cause: com.microsoft.sqlserver.jdbc.SQLServerException: 必须声明表变量 "@P0". ; u ...

  4. Fleury算法

    关于为什么不选桥 因为选桥之后会变成两个联通分支,这时由于可能产生的新联通分支不是孤立顶点,他俩都不联通了,那么也就绝对不可能“一笔画”走下来了 关于为什么可以选除桥之外的任意一条边走 本质原因是因为 ...

  5. numpy.argmax()

    numpy.argmax(a, axis=None, out=None) 返回沿轴axis最大值的索引 Parameters: a : array_like                      ...

  6. Typecho V1.1反序列化导致代码执行分析

    0x00  前言     今天在Seebug的公众号看到了Typecho的一个前台getshell分析的文章,然后自己也想来学习一下.保持对行内的关注,了解最新的漏洞很重要. 0x01  什么是反序列 ...

  7. CentOS 7 主机名bogon解决办法

    转https://blog.csdn.net/qq_24221531/article/details/80334942 一.修改linux主机的配置文件/etc/hostname 和 /etc/hos ...

  8. 新创建的数据库，执行db2look时，遇到package db2lkfun.bnd bind failed

    在新创建的数据库中,执行db2look的时候,存在这样的问题 db2v97i1@oc0644314035 ~]$ db2look -d sample -e -l -o db2look.ddl -- N ...

  9. java_Proxy动态代理_AOP

    讲了JDK里使用Proxy动态代理的机制,详细过程. 切面类TransactionHandler需要实现InvocationHaandler接口,实现它的invoke方法. 项目目录: User类代码 ...

  10. EasyMock set方法报错: java.lang.AssertionError

    有返回值的方法没问题, 直接andReturn就行了. EasyMock.expect(info.getWebTitle()).andReturn(StringUtils.EMPTY).anyTime ...