UDN-企业互联网技术人气社区

板块导航

浏览  : 465
回复  : 7

[原生js] 原生js封装二级城市下拉列表的实现代码

[复制链接]
饼干妹妹的头像 楼主
发表于 2017-1-10 14:17:32 | 显示全部楼层 |阅读模式
  下面小编就为大家带来一篇原生js封装二级城市下拉列表的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  闲的蛋疼,封装了个二级城市下拉 先保证html里有
  1. <SPAN style="BACKGROUND-COLOR: #ffffff; COLOR: #ff0000"><select id="province" size=1 >
  2. </select>
  3. <select id="city" style="width:60px">
  4. </select>
  5. <input type="hidden" id="pro_city" /></SPAN>
复制代码

  然后引用js  最终通过new SelectCity()  调用。  懒得分离这里js就写在页面了
  
  一言不合上代码
  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. </head>
  5. <body>
  6. <select id="province" size=1 >
  7. </select>
  8. <select id="city" style="width:60px">
  9. </select>
  10. <input type="hidden" id="pro_city" />

  11. <script type="text/JavaScript">
  12. function SelectCity(){
  13.   this.init();
  14. }

  15. SelectCity.prototype={
  16.    
  17.   init:function(){
  18.     this.arr = new Array();
  19.     this.proArr=[
  20.       '北京','上海','天津','重庆','河北','山西','内蒙古','辽宁','吉林','黑龙江','江苏','浙江','安徽','福建','江西','山东','河南','湖北','湖南','广东','广西','海南','四川','贵州','云南','西藏','陕西','甘肃','宁夏','青海','新疆','香港','澳门','台湾'
  21.     ]
  22.     this.arr[0 ]="东城,西城,崇文,宣武,朝阳,丰台,石景山,海淀,门头沟,房山,通州,顺义,昌平,大兴,平谷,怀柔,密云,延庆" ;
  23.     this.arr[1 ]="黄浦,卢湾,徐汇,长宁,静安,普陀,闸北,虹口,杨浦,闵行,宝山,嘉定,浦东,金山,松江,青浦,南汇,奉贤,崇明" ;
  24.     this.arr[2 ]="和平,东丽,河东,西青,河西,津南,南开,北辰,河北,武清,红挢,塘沽,汉沽,大港,宁河,静海,宝坻,蓟县" ;
  25.     this.arr[3 ]="万州,涪陵,渝中,大渡口,江北,沙坪坝,九龙坡,南岸,北碚,万盛,双挢,渝北,巴南,黔江,长寿,綦江,潼南,铜梁,大足,荣昌,壁山,梁平,城口,丰都,垫江,武隆,忠县,开县,云阳,奉节,巫山,巫溪,石柱,秀山,酉阳,彭水,江津,合川,永川,南川" ;
  26.     this.arr[4 ]="石家庄,邯郸,邢台,保定,张家口,承德,廊坊,唐山,秦皇岛,沧州,衡水";
  27.     this.arr[5 ]="太原,大同,阳泉,长治,晋城,朔州,吕梁,忻州,晋中,临汾,运城" ;
  28.     this.arr[6 ]="呼和浩特,包头,乌海,赤峰,呼伦贝尔盟,阿拉善盟,哲里木盟,兴安盟,乌兰察布盟,锡林郭勒盟,巴彦淖尔盟,伊克昭盟" ;
  29.     this.arr[7 ]="沈阳,大连,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,盘锦,铁岭,朝阳,葫芦岛" ;
  30.     this.arr[8 ]="长春,吉林,四平,辽源,通化,白山,松原,白城,延边" ;
  31.     this.arr[9 ]="哈尔滨,齐齐哈尔,牡丹江,佳木斯,大庆,绥化,鹤岗,鸡西,黑河,双鸭山,伊春,七台河,大兴安岭";
  32.     this.arr[10 ]="南京,镇江,苏州,南通,扬州,盐城,徐州,连云港,常州,无锡,宿迁,泰州,淮安" ;
  33.     this.arr[11 ]="杭州,宁波,温州,嘉兴,湖州,绍兴,金华,衢州,舟山,台州,丽水" ;
  34.     this.arr[12 ]="合肥,芜湖,蚌埠,马鞍山,淮北,铜陵,安庆,黄山,滁州,宿州,池州,淮南,巢湖,阜阳,六安,宣城,亳州" ;
  35.     this.arr[13 ]="福州,厦门,莆田,三明,泉州,漳州,南平,龙岩,宁德" ;
  36.     this.arr[14 ]="南昌市,景德镇,九江,鹰潭,萍乡,新馀,赣州,吉安,宜春,抚州,上饶" ;
  37.     this.arr[15 ]="济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照,莱芜,临沂,德州,聊城,滨州,菏泽" ;
  38.     this.arr[16 ]="郑州,开封,洛阳,平顶山,安阳,鹤壁,新乡,焦作,濮阳,许昌,漯河,三门峡,南阳,商丘,信阳,周口,驻马店,济源" ;
  39.     this.arr[17 ]="武汉,宜昌,荆州,襄樊,黄石,荆门,黄冈,十堰,恩施,潜江,天门,仙桃,随州,咸宁,孝感,鄂州" ;
  40.     this.arr[18 ]="长沙,常德,株洲,湘潭,衡阳,岳阳,邵阳,益阳,娄底,怀化,郴州,永州,湘西,张家界";
  41.     this.arr[19 ]="广州,深圳,珠海,汕头,东莞,中山,佛山,韶关,江门,湛江,茂名,肇庆,惠州,梅州,汕尾,河源,阳江,清远,潮州,揭阳,云浮" ;
  42.     this.arr[20 ]="南宁,柳州,桂林,梧州,北海,防城港,钦州,贵港,玉林,南宁地区,柳州地区,贺州,百色,河池";
  43.     this.arr[21 ]="海口,三亚" ;
  44.     this.arr[22 ]="成都,绵阳,德阳,自贡,攀枝花,广元,内江,乐山,南充,宜宾,广安,达川,雅安,眉山,甘孜,凉山,泸州" ;
  45.     this.arr[23 ]="贵阳,六盘水,遵义,安顺,铜仁,黔西南,毕节,黔东南,黔南" ;
  46.     this.arr[24 ]="昆明,大理,曲靖,玉溪,昭通,楚雄,红河,文山,思茅,西双版纳,保山,德宏,丽江,怒江,迪庆,临沧" ;
  47.     this.arr[25 ]="拉萨,日喀则,山南,林芝,昌都,阿里,那曲" ;
  48.     this.arr[26 ]="西安,宝鸡,咸阳,铜川,渭南,延安,榆林,汉中,安康,商洛" ;
  49.     this.arr[27 ]="兰州,嘉峪关,金昌,白银,天水,酒泉,张掖,武威,定西,陇南,平凉,庆阳,临夏,甘南";
  50.     this.arr[28 ]="银川,石嘴山,吴忠,固原" ;
  51.     this.arr[29 ]="西宁,海东,海南,海北,黄南,玉树,果洛,海西" ;
  52.     this.arr[30 ]="乌鲁木齐,石河子,克拉玛依,伊犁,巴音郭勒,昌吉,克孜勒苏柯尔克孜,博 尔塔拉,吐鲁番,哈密,喀什,和田,阿克苏" ;
  53.     this.arr[31 ]="香港" ;
  54.     this.arr[32 ]="澳门" ;
  55.     this.arr[33 ]="台北,高雄,台中,台南,屏东,南投,云林,新竹,彰化,苗栗,嘉义,花莲,桃园,宜兰,基隆,台东,金门,马祖,澎湖";

  56.     var city = document.getElementById("city");
  57.     var cityArr = this.arr[0].split(",");
  58.     var pro = document.getElementById("province");

  59.     //初始化北京省份
  60.     for(var i=0;i<this.proArr.length;i++)
  61.     {     
  62.          
  63.       pro[i]=new Option(this.proArr[i],this.proArr[i]);
  64.          
  65.     }

  66.     //初始化北京城市
  67.     for(var i=0;i<cityArr.length;i++)
  68.     {     
  69.       city[i]=new Option(cityArr[i],cityArr[i]);
  70.          
  71.     }

  72.     this.handelEvent();
  73.      
  74.   },
  75.   handelEvent:function(){
  76.     var _this=this;
  77.     //alert(this.arr[20])
  78.     var pro = document.getElementById("province");
  79.     var city = document.getElementById("city");
  80.     var pro_city=document.getElementById('pro_city');
  81.     pro.onchange=function(){
  82.       var index = this.selectedIndex;
  83.       var cityArr = _this.arr[index].split(",");  
  84.       city.length = 0;
  85.       //将城市数组中的值填充到城市下拉框中
  86.       for(var i=0;i<cityArr.length;i++)
  87.       {
  88.         city[i]=new Option(cityArr[i],cityArr[i]);
  89.       }
  90.     }

  91.     city.onchange=function(){
  92.       //将最终值写在一个隐藏input里 可自定义格式
  93.       pro_city.value=pro.value+'-'+this.value;
  94.       alert(pro_city.value)
  95.     }
  96.   }
  97. }

  98. new SelectCity();
  99. </script>
  100. </body>
  101. </html>
复制代码

  以上就是小编为大家带来的原生js封装二级城市下拉列表的实现代码的全部内容了,希望大家多多支持。
发表于 2017-1-10 14:18:01 | 显示全部楼层
经常看到”饼干妹妹“发帖,辛苦了
使用道具 举报

回复

发表于 2017-1-10 14:18:01 | 显示全部楼层
前排支持下
使用道具 举报

回复

发表于 2017-1-10 14:18:02 | 显示全部楼层
回帖支持下楼主,请眼熟我,我叫“覆手倾天下“
使用道具 举报

回复

发表于 2017-1-10 14:18:03 | 显示全部楼层
我完全是被标题<<原生js封装二级城市下拉列表的实现代码>>吸引过来的
使用道具 举报

回复

发表于 2017-1-10 15:21:06 | 显示全部楼层
学习
使用道具 举报

回复

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

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部