js多级联动示例(省份和城市二级联动)

本文描述的省份和城市二级联动下拉菜单,在js部分设置省份和城市信息,当然也可以将数据保存在数据库中,当需要使用的时候在读取。这里用的是js原生代码

在html文件中设置省份、城市下拉列表如下:

<select id="pro" onchange="addCity();"></select>
<select id="city"></select>

在js中设置省份信息代码如下:

var province=["北京","上海","广东","江苏","浙江","重庆","安徽","福建","甘肃","广西",
"贵州","海南","河北","黑龙江","河南","湖北","湖南","江西","吉林","辽宁","内蒙古",
"宁夏","青海","山东","山西","陕西","四川","天津","新疆","西藏","云南","香港",
"澳门","台湾","海外"];

js设置城市信息代码如下:

city=[["东城","西城","朝阳","丰台","石景山","海淀","门头沟","房山","通州","顺义","昌平","大兴","平谷","怀柔","密云","延庆"],
      ["崇明","黄浦","卢湾","徐汇","长宁","静安","普陀","闸北","虹口","杨浦","闵行","宝山","嘉定","浦东","金山","松江","青浦","南汇","奉贤"],
      ["广州","深圳","珠海","东莞","中山","佛山","惠州","河源","潮州","江门","揭阳","茂名","梅州","清远","汕头","汕尾","韶关","顺德","阳江","云浮","湛江","肇庆"],
      ["南京","常熟","常州","海门","淮安","江都","江阴","昆山","连云港","南通","启东","沭阳","宿迁","苏州","太仓","泰州","同里","无锡","徐州","盐城","宜兴","仪征","张家港","镇江","周庄"],
      ["杭州","安吉","慈溪","定海","奉化","海盐","黄岩","湖州","嘉兴","金华","临安","临海","丽水","宁波","瓯海","平湖","千岛湖","衢州","江山","瑞安","绍兴","嵊州","台州","温岭","温州","余姚","舟山"],
      ["万州","涪陵","渝中","大渡口","江北","沙坪坝","九龙坡","南岸","北碚","万盛","双桥","渝北","巴南","黔江","长寿","綦江","潼南","铜梁","大足","荣昌","璧山","梁平","城口","丰都","垫江","武隆","忠县","开县","云阳","奉节","巫山","巫溪","石柱","秀山","酉阳","彭水","江津","合川","永川","南川"],
      ["合肥","安庆","蚌埠","亳州","巢湖","滁州","阜阳","贵池","淮北","淮南","黄山","九华山","六安","马鞍山","宿州","铜陵","屯溪","芜湖","宣城"],
      ["福州","厦门","泉州","漳州","龙岩","南平","宁德","莆田","三明"],
      ["兰州","白银","定西","敦煌","甘南","金昌","酒泉","临夏","平凉","天水","武都","武威","西峰","张掖"],
      ["南宁","百色","北海","桂林","防城港","贵港","河池","贺州","柳州","钦州","梧州","玉林"],
      ["贵阳","安顺","毕节","都匀","凯里","六盘水","铜仁","兴义","玉屏","遵义"],
      ["海口","儋县","陵水","琼海","三亚","通什","万宁"],
      ["石家庄","保定","北戴河","沧州","承德","丰润","邯郸","衡水","廊坊","南戴河","秦皇岛","唐山","新城","邢台","张家口"],
      ["哈尔滨","北安","大庆","大兴安岭","鹤岗","黑河","佳木斯","鸡西","牡丹江","齐齐哈尔","七台河","双鸭山","绥化","伊春"],
      ["郑州","安阳","鹤壁","潢川","焦作","济源","开封","漯河","洛阳","南阳","平顶山","濮阳","三门峡","商丘","新乡","信阳","许昌","周口","驻马店"],
      ["武汉","恩施","鄂州","黄冈","黄石","荆门","荆州","潜江","十堰","随州","武穴","仙桃","咸宁","襄阳","襄樊","孝感","宜昌"],
      ["长沙","常德","郴州","衡阳","怀化","吉首","娄底","邵阳","湘潭","益阳","岳阳","永州","张家界","株洲"],
      ["南昌","抚州","赣州","吉安","景德镇","井冈山","九江","庐山","萍乡","上饶","新余","宜春","鹰潭"],
      ["长春","吉林","白城","白山","珲春","辽源","梅河","四平","松原","通化","延吉"],
      ["沈阳","鞍山","本溪","朝阳","大连","丹东","抚顺","阜新","葫芦岛","锦州","辽阳","盘锦","铁岭","营口"],
      ["呼和浩特","阿拉善盟","包头","赤峰","东胜","海拉尔","集宁","临河","通辽","乌海","乌兰浩特","锡林浩特"],
      ["银川","固源","石嘴山","吴忠"],
      ["西宁","德令哈","格尔木","共和","海东","海晏","玛沁","同仁","玉树"],
      ["济南","滨州","兖州","德州","东营","菏泽","济宁","莱芜","聊城","临沂","蓬莱","青岛","曲阜","日照","泰安","潍坊","威海","烟台","枣庄","淄博"],
      ["太原","长治","大同","侯马","晋城","离石","临汾","宁武","朔州","沂州","阳泉","榆次","运城"],
      ["西安","安康","宝鸡","汉中","渭南","商州","绥德","铜川","咸阳","延安","榆林"],
      ["成都","巴中","达川","德阳","都江堰","峨眉山","涪陵","广安","广元","九寨沟","康定","乐山","泸州","马尔康","绵阳","眉山","南充","内江","攀枝花","遂宁","汶川","西昌","雅安","宜宾","自贡","资阳"],
      ["天津","和平","东丽","河东","西青","河西","津南","南开","北辰","河北","武清","红桥","塘沽","汉沽","大港","宁河","静海","宝坻","蓟县"],
      ["乌鲁木齐","阿克苏","阿勒泰","阿图什","博乐","昌吉","东山","哈密","和田","喀什","克拉玛依","库车","库尔勒","奎屯","石河子","塔城","吐鲁番","伊宁"],
      ["拉萨","阿里","昌都","林芝","那曲","日喀则","山南"],
      ["昆明","大理","保山","楚雄","东川","个旧","景洪","开远","临沧","丽江","六库","潞西","曲靖","思茅","文山","西双版纳","玉溪","中甸","昭通"],
      ["香港","九龙","新界"],
      ["澳门"],
      ["台北","基隆","台南","台中","高雄","屏东","南投","云林","新竹","彰化","苗栗","嘉义","花莲","桃园","宜兰","台东","金门","马祖","澎湖"],
      ["俄罗斯","美国","日本","英国","法国","德国","澳大利亚","东南亚","阿拉伯半岛","非洲","南美洲"]];

在js代码中获取html下拉列表(#pro,#city)的代码如下:

var pro=document.getElementById("pro");
var city=document.getElementById("city");

js初始化#pro下拉列表:

for (var i = 0; i < province.length; i++)
    pro.add(new Option(province[i]));

js实现当点击一级菜单(省份)时,二级菜单(城市)显示对应城市列表信息:

//获取点击的省份的下标
function getIndex(){
  for(var i=0;i<province.length;i++)
    if(province[i]==pro.value)
      return i;
}

//根据获取的省份下标,更改二级列表为对应下标的城市列表,此即二级联动
function addCity(e){
    var index=getIndex();
    e.options.length=0;
    for (var i = 0; i < city[index].length; i++)
        e.add(new Option(city[index][i]));
}

二级联动的应用在日常code中常会遇到,简单的说就是集合映射的问题。

假设有两个数组a[],b[]

我们设置index标识量,

y=a[index],y与index一一对应

g=b[index],g与index也一一对应

这样当更改y的值时,index随之改变,也就改变了g的值,使得y与g一一对应,此即二级联动的实现原理。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王磊的博客

C# 控制台应用程序输出颜色字体[更正版]

首先感谢院子里的“yanxinchen”,之前的方法是通过c#调用系统api实现的,相比之下我的有点画蛇添足了,哈哈。 最佳解决方案的代码: static vo...

43380
来自专栏GIS讲堂

Openlayers中热力图的实现

Heatmap 是用来呈现一定区域内的统计度量,最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。Heatmap.j...

57630
来自专栏difcareer的技术笔记

JNI实现源码分析【二 数据结构】正文0x01: 虚拟机中的对象0x02: Dex相关的结构0x03: 实现JNI需要的数据结构0x04: JNI参数传递的数据结构

我们知道,Java是面向对象的,Java是运行在虚拟机里面的,即先通过编译成字节码(dalvik对应dex),虚拟机解析字节码,构造出逻辑上相同的对象。 及虚拟...

14430
来自专栏叁金大数据

EmguCV学习——简单算法 差分与高斯

公司项目需要检测运动物体,我对opencv也没啥研究,google了好久看了好多方法,最简单的就是差分与高斯背景建模了。

19230
来自专栏Android干货

Android项目实战(八):列表右侧边栏拼音展示效果

32250
来自专栏用户画像

省份和城市的级联下拉菜单

29920
来自专栏菩提树下的杨过

Silverlight Telerik控件学习:TreeView数据绑定并初始化选中状态、PanelBar的Accordion效果、TabPanel、Frame基本使用

实际开发中控件的数据源肯定是动态绑定的,不可能在xaml里写死item项。既然要绑定,就先来几个实体类: ? 上面是类图,各类的代码如下:  Business...

31780
来自专栏搞前端的李蚊子

Html5模拟通讯录人员排序(sen.js)

// JavaScript Document  var PY_Json_Str = ""; var PY_Str_1 = ""; var PY_Str_...

90660
来自专栏Data Analysis & Viz

手把手教你完成一个数据科学小项目(6):城市提取与可视化

请先阅读《“中国年轻人正带领国家走向危机”,这锅背是不背? 》 一文,以对“手把手教你完成一个数据科学小项目”系列有个全局性的了解。

12420
来自专栏遊俠扎彪

删除Windows右键新建文件类型

Win+R 运行regedit,效果如下:

25090

扫码关注云+社区

领取腾讯云代金券