原生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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
JQuery从头学起第三讲
Jul 06 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
解析vue、angular深度作用选择器
Sep 11 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
我的论坛源代码(三)
2006/10/09 PHP
探讨php中header的用法详解
2013/06/07 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
jQuery实现本地存储
2020/12/22 jQuery
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
详解python中@的用法
2019/03/27 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
详解Python模块化编程与装饰器
2021/01/16 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
奖学金自我鉴定范文
2013/10/03 职场文书
个人实用简单的自我评价
2013/10/19 职场文书
应届生骨科医生求职信
2013/10/31 职场文书
微电影大赛策划方案
2014/06/05 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
大连导游词
2015/02/12 职场文书