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


Posted in Javascript onJune 16, 2016

闲的蛋疼,封装了个二级城市下拉 先保证html里有

<SPAN style="BACKGROUND-COLOR: #ffffff; COLOR: #ff0000"><select id="province" size=1 > 
</select> 
<select id="city" style="width:60px"> 
</select> 
<input type="hidden" id="pro_city" /></SPAN>

然后引用js  最终通过new SelectCity()  调用。  懒得分离这里js就写在页面了

一言不合上代码

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

以上就是小编为大家带来的原生js封装二级城市下拉列表的实现代码的全部内容了,希望大家多多支持脚步之家。

Javascript 相关文章推荐
Javascript倒计时代码
Aug 12 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
js 调用百度分享功能
Feb 27 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
jQuery获取剪贴板内容的方法
Jun 16 #Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 #Javascript
全面理解JavaScript中的继承(必看)
Jun 16 #Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 #Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 #Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 #Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 #Javascript
You might like
php仿discuz分页效果代码
2008/10/02 PHP
destoon之一键登录设置
2014/06/21 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
php查询whois信息的方法
2015/06/08 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
Python: glob匹配文件的操作
2020/12/11 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
入党转预备思想汇报
2014/01/07 职场文书
乐观大学生的自我评价
2014/01/10 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
公司开业庆典主持词
2014/03/21 职场文书
差生评语大全
2014/05/04 职场文书
庆六一宣传标语
2014/10/08 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
五年级学生评语大全
2014/12/26 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server