Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 681|回复: 0

[默认分类] 纯JS省市区三级联动

[复制链接]
  • TA的每日心情
    开心
    2021-12-13 21:45
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    发表于 2018-7-13 16:52:00 | 显示全部楼层 |阅读模式
    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动。
    当省市区数据变动是只需调正js即可。
    使用方法:

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>纯JS省市区联动</title>
    <script type="text/javascript" src="jsAddress.js"></script>
    </head>
    <body>
    <div>
    省:<select id="cmbProvince"></select>
    市:<select id="cmbCity"></select>
    区:<select id="cmbArea"></select>
    <br /><br />
    省:<select id="Select1"></select>
    市:<select id="Select2"></select>
    区:<select id="Select3"></select>
    <script type="text/javascript">
    addressInit("cmbProvince", "cmbCity", "cmbArea", "陕西", "宝鸡市", "金台区");
    addressInit("Select1", "Select2", "Select3");
    </script>
    </div>
    </body>
    </html>

    核心代码如下:

    1. var addressInit = function(_cmbProvince, _cmbCity, _cmbArea, defaultProvince, defaultCity, defaultArea)
    2. {
    3.         var cmbProvince = document.getElementById(_cmbProvince);
    4.         var cmbCity = document.getElementById(_cmbCity);
    5.         var cmbArea = document.getElementById(_cmbArea);
    6.        
    7.         function cmbSelect(cmb, str)
    8.         {
    9.                 for(var i=0; i<cmb.options.length; i++)
    10.                 {
    11.                         if(cmb.options[i].value == str)
    12.                         {
    13.                                 cmb.selectedIndex = i;
    14.                                 return;
    15.                         }
    16.                 }
    17.         }
    18.         function cmbAddOption(cmb, str, obj)
    19.         {
    20.                 var option = document.createElement("OPTION");
    21.                 cmb.options.add(option);
    22.                 option.innerHTML = str;
    23.                 option.value = str;
    24.                 option.obj = obj;
    25.         }
    26.        
    27.         function changeCity()
    28.         {
    29.                 cmbArea.options.length = 0;
    30.                 if(cmbCity.selectedIndex == -1)return;
    31.                 var item = cmbCity.options[cmbCity.selectedIndex].obj;
    32.                 for(var i=0; i<item.areaList.length; i++)
    33.                 {
    34.                         cmbAddOption(cmbArea, item.areaList[i], null);
    35.                 }
    36.                 cmbSelect(cmbArea, defaultArea);
    37.         }
    38.         function changeProvince()
    39.         {
    40.                 cmbCity.options.length = 0;
    41.                 cmbCity.onchange = null;
    42.                 if(cmbProvince.selectedIndex == -1)return;
    43.                 var item = cmbProvince.options[cmbProvince.selectedIndex].obj;
    44.                 for(var i=0; i<item.cityList.length; i++)
    45.                 {
    46.                         cmbAddOption(cmbCity, item.cityList[i].name, item.cityList[i]);
    47.                 }
    48.                 cmbSelect(cmbCity, defaultCity);
    49.                 changeCity();
    50.                 cmbCity.onchange = changeCity;
    51.         }
    52.        
    53.         for(var i=0; i<provinceList.length; i++)
    54.         {
    55.                 cmbAddOption(cmbProvince, provinceList[i].name, provinceList[i]);
    56.         }
    57.         cmbSelect(cmbProvince, defaultProvince);
    58.         changeProvince();
    59.         cmbProvince.onchange = changeProvince;
    60. }
    61. var provinceList = [
    62. {name:"北京", cityList:[                  
    63. {name:"市辖区", areaList:["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区"]},
    64. {name:"县", areaList:["密云县","延庆县"]}
    65. ]},
    66. {name:"上海", cityList:[                  
    67. {name:"市辖区", areaList:["黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区","闸北区","虹口区","杨浦区","闵行区","宝山区","金山区","松江区","青浦区","南汇区","奉贤区"]},       
    68. {name:"县", areaList:["崇明县"]}
    69. ]}
    70. ];
    复制代码

    实例下载:http://files.cnblogs.com/zjfree/jsAddress.rar
    2013-07-16 修正火狐兼容性问题。
    2013-08-20 从QQ网站中提取的纯JS省市区三级联动强烈推荐
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-3-29 22:56 , Processed in 0.380764 second(s), 49 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表