首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现全国省份城市级联下拉菜单效果代码

Posted in Javascript onSeptember 07, 2015

本文实例讲述了js实现全国省份城市级联下拉菜单效果代码。分享给大家供大家参考。具体如下：

这是一个大家都知道的网页小功能，很常见，全国省份与城市级联菜单，采用Select下拉的方式选择数据，不过现在很多都Ajax了，貌似这种老形式已经过时了，不过在兼容性方面，仍然是不落后的。

运行效果截图如下：

js实现全国省份城市级联下拉菜单效果代码

在线演示地址如下：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>全国省份城市级联下拉菜单</title>
</head>
<body>
<script language="javascript">
cityareaname=new Array(35);
cityareacode=new Array(35);
function first(preP,preC,formname,selectP,selectC)
{
  a=0;
if (selectP=='01')
 { a=1;tempoption=new Option('北京','01',false,true); }
else
 { tempoption=new Option('北京','01'); }
eval('document.'+formname+'.'+preP+'.options[1]=tempoption;');
cityareacode[0]=new Array('0101','0102','0103','0104','0105','0106','0107','0108');
cityareaname[0]=new Array('东城区','西城区','崇文区','宣武区','朝阳区','海淀区','丰台区','石景山');
if (selectP=='02')
 { a=2;tempoption=new Option('深圳','02',false,true); }
else
 { tempoption=new Option('深圳','02'); }
eval('document.'+formname+'.'+preP+'.options[2]=tempoption;');
cityareacode[1]=new Array('0201','0202','0203','0204','0205','0206');
cityareaname[1]=new Array('罗湖','福田','南山','盐田','宝安','龙岗');
if (selectP=='03')
 { a=3;tempoption=new Option('上海','03',false,true); }
else
 { tempoption=new Option('上海','03'); }
eval('document.'+formname+'.'+preP+'.options[3]=tempoption;');
cityareacode[2]=new Array('0301','0302','0303','0304','0305','0306','0307','0308','0309','0310','0311','0312','0313','0314','0315','0316','0317','0318','0319','0320');
cityareaname[2]=new Array('宝山','金山','南市','长宁','静安','青浦','崇明','卢湾','松江','奉贤','浦东','杨浦','虹口','普陀','闸北','黄浦','闵行','徐汇','嘉定','南汇');
if (selectP=='04')
 { a=4;tempoption=new Option('重庆','04',false,true); }
else
 { tempoption=new Option('重庆','04'); }
eval('document.'+formname+'.'+preP+'.options[4]=tempoption;');
cityareacode[3]=new Array('0401','0402','0403','0404','0405','0406');
cityareaname[3]=new Array('渝中','江北','沙坪坝','南岸','九龙坡','大渡口');
if (selectP=='05')
 { a=5;tempoption=new Option('天津','05',false,true); }
else
 { tempoption=new Option('天津','05'); }
eval('document.'+formname+'.'+preP+'.options[5]=tempoption;');
cityareacode[4]=new Array('0501','0502','0503','0504','0505','0506','0507','0508','0509','0510','0511','0512','0513','0514','0515');
cityareaname[4]=new Array('和平','河北','河西','河东','南开','红桥','塘沽','汉沽','大港','东丽','西青','津南','北辰','武清','滨海');
if (selectP=='06')
 { a=6;tempoption=new Option('广东','06',false,true); }
else
 { tempoption=new Option('广东','06'); }
eval('document.'+formname+'.'+preP+'.options[6]=tempoption;');
cityareacode[5]=new Array('0601','0602','0603','0604','0605','0606','0607','0608','0609','0610','0611','0612','0613','0614','0615');
cityareaname[5]=new Array('广州','珠海','中山','佛山','东莞','清远','肇庆','阳江','湛江','韶关','惠州','河源','汕尾','汕头','梅州');
if (selectP=='07')
 { a=7;tempoption=new Option('河北','07',false,true); }
else
 { tempoption=new Option('河北','07'); }
eval('document.'+formname+'.'+preP+'.options[7]=tempoption;');
cityareacode[6]=new Array('0701','0702','0703','0704','0705','0706','0707','0708','0709','0710','0711');
cityareaname[6]=new Array('石家庄','唐山','秦皇岛','邯郸','邢台','张家口','承德','廊坊','沧州','保定','衡水');
if (selectP=='08')
 { a=8;tempoption=new Option('山西','08',false,true); }
else
 { tempoption=new Option('山西','08'); }
eval('document.'+formname+'.'+preP+'.options[8]=tempoption;');
cityareacode[7]=new Array('0801','0802','0803','0804','0805','0806','0807');
cityareaname[7]=new Array('太原','大同','阳泉','朔州','长治','临汾','晋城');
if (selectP=='09')
 { a=9;tempoption=new Option('内蒙古','09',false,true); }
else
 { tempoption=new Option('内蒙古','09'); }
eval('document.'+formname+'.'+preP+'.options[9]=tempoption;');
cityareacode[8]=new Array('0901','0902','0903','0904','0905','0906','0907','0908','0909','0910','0911');
cityareaname[8]=new Array('呼和浩特','包头','乌海','临河','东胜','集宁','锡林浩特','通辽','赤峰','海拉尔','乌兰浩特');
if (selectP=='10')
 { a=10;tempoption=new Option('辽宁','10',false,true); }
else
 { tempoption=new Option('辽宁','10'); }
eval('document.'+formname+'.'+preP+'.options[10]=tempoption;');
cityareacode[9]=new Array('1001','1002','1003','1004','1005','1006','1007','1008','1009','1010','1011','1012','1013','1014');
cityareaname[9]=new Array('沈阳','大连','鞍山','锦州','丹东','盘锦','铁岭','抚顺','营口','辽阳','阜新','本溪','朝阳','葫芦岛');
if (selectP=='11')
 { a=11;tempoption=new Option('吉林','11',false,true); }
else
 { tempoption=new Option('吉林','11'); }
eval('document.'+formname+'.'+preP+'.options[11]=tempoption;');
cityareacode[10]=new Array('1101','1102','1103','1104','1105','1106','1107','1108','1109');
cityareaname[10]=new Array('长春','吉林','四平','辽源','通化','白山','松原','白城','延边');
if (selectP=='12')
 { a=12;tempoption=new Option('黑龙江','12',false,true); }
else
 { tempoption=new Option('黑龙江','12'); }
eval('document.'+formname+'.'+preP+'.options[12]=tempoption;');
cityareacode[11]=new Array('1201','1202','1203','1204','1205','1206','1207','1208','1209','1210','1211','1212','1213');
cityareaname[11]=new Array('哈尔滨','齐齐哈尔','牡丹江','佳木斯','大庆','伊春','黑河','鸡西','鹤岗','双鸭山','七台河','绥化','大兴安岭');
if (selectP=='13')
 { a=13;tempoption=new Option('江苏','13',false,true); }
else
 { tempoption=new Option('江苏','13'); }
eval('document.'+formname+'.'+preP+'.options[13]=tempoption;');
cityareacode[12]=new Array('1301','1302','1303','1304','1305','1306','1307','1308','1309','1310','1311','1312','1313');
cityareaname[12]=new Array('南京','苏州','无锡','常州','镇江','连云港 ','扬州','徐州 ','南通','盐城','淮阴','泰州','宿迁');
if (selectP=='14')
 { a=14;tempoption=new Option('浙江','14',false,true); }
else
 { tempoption=new Option('浙江','14'); }
eval('document.'+formname+'.'+preP+'.options[14]=tempoption;');
cityareacode[13]=new Array('1401','1402','1403','1404','1405','1406','1407','1408','1409','1410','1411');
cityareaname[13]=new Array('杭州','湖州','丽水','温州','绍兴','舟山','嘉兴','金华','台州','衢州','宁波');
if (selectP=='15')
 { a=15;tempoption=new Option('安徽','15',false,true); }
else
 { tempoption=new Option('安徽','15'); }
eval('document.'+formname+'.'+preP+'.options[15]=tempoption;');
cityareacode[14]=new Array('1501','1502','1503','1504','1505','1506','1507','1508','1509','1510','1511','1512','1513','1514','1515','1516','1517');
cityareaname[14]=new Array('合肥 ','芜湖 ','蚌埠 ','滁州 ','安庆 ','六安 ','黄山 ','宣城 ','淮南 ','宿州 ','马鞍山 ','铜陵','淮北 ','阜阳 ','池州 ','巢湖 ','亳州');
if (selectP=='16')
 { a=16;tempoption=new Option('福建','16',false,true); }
else
 { tempoption=new Option('福建','16'); }
eval('document.'+formname+'.'+preP+'.options[16]=tempoption;');
cityareacode[15]=new Array('1601','1602','1603','1604','1605','1606','1607','1608','1609');
cityareaname[15]=new Array('福州 ','厦门 ','泉州 ','漳州 ','龙岩 ','南平 ','宁德 ','莆田 ','三明');
if (selectP=='17')
 { a=17;tempoption=new Option('江西','17',false,true); }
else
 { tempoption=new Option('江西','17'); }
eval('document.'+formname+'.'+preP+'.options[17]=tempoption;');
cityareacode[16]=new Array('1701','1702','1703','1704','1705','1706','1707','1708','1709','1710','1711');
cityareaname[16]=new Array('南昌','景德镇','九江','萍乡','新余','鹰潭','赣州','宜春','吉安','上饶','抚州');
if (selectP=='18')
 { a=18;tempoption=new Option('山东','18',false,true); }
else
 { tempoption=new Option('山东','18'); }
eval('document.'+formname+'.'+preP+'.options[18]=tempoption;');
cityareacode[17]=new Array('1801','1802','1803','1804','1805','1806','1807','1808','1809','1810','1811','1812','1813','1814','1815','1816','1817');
cityareaname[17]=new Array('济南','青岛','淄博','德州','烟台','潍坊','济宁','泰安','临沂','菏泽','威海','枣庄','日照','莱芜','聊城','滨州','东营');
if (selectP=='19')
 { a=19;tempoption=new Option('河南','19',false,true); }
else
 { tempoption=new Option('河南','19'); }
eval('document.'+formname+'.'+preP+'.options[19]=tempoption;');
cityareacode[18]=new Array('1901','1902','1903','1904','1905','1906','1907','1908','1909','1910','1911','1912','1913','1914','1915','1916','1917','1918');
cityareaname[18]=new Array('郑州','开封','洛阳','平顶山','安阳','鹤壁','新乡','焦作','濮阳','许昌','漯河','三门峡','南阳','商丘','周口','驻马店','信阳','济源');
if (selectP=='20')
 { a=20;tempoption=new Option('湖北','20',false,true); }
else
 { tempoption=new Option('湖北','20'); }
eval('document.'+formname+'.'+preP+'.options[20]=tempoption;');
cityareacode[19]=new Array('2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017');
cityareaname[19]=new Array('武汉','黄石','十堰','荆州','宜昌','襄樊','鄂州','荆门','孝感','黄冈','咸宁','恩施','随州','仙桃','天门','潜江','神农架');
if (selectP=='21')
 { a=21;tempoption=new Option('湖南','21',false,true); }
else
 { tempoption=new Option('湖南','21'); }
eval('document.'+formname+'.'+preP+'.options[21]=tempoption;');
cityareacode[20]=new Array('2101','2102','2103','2104','2105','2106','2107','2108','2109','2110','2111','2112','2113');
cityareaname[20]=new Array('长沙','株州','湘潭','衡阳','邵阳','岳阳','常德','郴州','益阳','永州','怀化','娄底','湘西 ');
if (selectP=='22')
 { a=22;tempoption=new Option('广西','22',false,true); }
else
 { tempoption=new Option('广西','22'); }
eval('document.'+formname+'.'+preP+'.options[22]=tempoption;');
cityareacode[21]=new Array('2201','2202','2203','2204','2205','2206','2207','2208','2209','2210','2211','2212');
cityareaname[21]=new Array('南宁','柳州','桂林','梧州','北海','防城港','钦州','贵港','玉林','贺州','百色','河池');
if (selectP=='23')
 { a=23;tempoption=new Option('海南','23',false,true); }
else
 { tempoption=new Option('海南','23'); }
eval('document.'+formname+'.'+preP+'.options[23]=tempoption;');
cityareacode[22]=new Array('2301','2302','2303','2304','2305','2306','2307','2308','2309');
cityareaname[22]=new Array('海口 ','三亚','通什','琼海','琼山','文昌','万宁','东方','儋州');
if (selectP=='24')
 { a=24;tempoption=new Option('四川','24',false,true); }
else
 { tempoption=new Option('四川','24'); }
eval('document.'+formname+'.'+preP+'.options[24]=tempoption;');
cityareacode[23]=new Array('2401','2402','2403','2404','2405','2406','2407','2408','2409','2410','2411','2412','2413','2414','2415','2416','2417','2418','2419','2420');
cityareaname[23]=new Array('成都','自贡','攀枝花','泸州','德阳','绵阳','广元','遂宁','内江','乐山','南充 ','宜宾','广安','达川','巴中','雅安','眉山 ','阿坝 ','甘孜 ','凉山 ');
if (selectP=='25')
 { a=25;tempoption=new Option('贵州','25',false,true); }
else
 { tempoption=new Option('贵州','25'); }
eval('document.'+formname+'.'+preP+'.options[25]=tempoption;');
cityareacode[24]=new Array('2501','2502','2503','2504','2505','2506','2507','2508','2509');
cityareaname[24]=new Array('贵阳 ','六盘水','遵义','铜仁','毕节','安顺','黔西南 ','黔东南','黔南');
if (selectP=='26')
 { a=26;tempoption=new Option('云南','26',false,true); }
else
 { tempoption=new Option('云南','26'); }
eval('document.'+formname+'.'+preP+'.options[26]=tempoption;');
cityareacode[25]=new Array('2601','2602','2603','2604','2605','2606','2607','2608','2609','2610','2611','2612','2613','2614','2615','2616','2617');
cityareaname[25]=new Array('昆明','东川','曲靖','玉溪','昭通','思茅','临沧','保山','丽江','文山 ','红河 ','西双版纳 ','楚雄 ','大理 ','德宏 ','怒江','迪庆');
if (selectP=='27')
 { a=27;tempoption=new Option('西藏','27',false,true); }
else
 { tempoption=new Option('西藏','27'); }
eval('document.'+formname+'.'+preP+'.options[27]=tempoption;');
cityareacode[26]=new Array('2701','2702','2703','2704','2705','2706','2707');
cityareaname[26]=new Array('拉萨','那曲','昌都','山南','日喀则','阿里','林芝');
if (selectP=='28')
 { a=28;tempoption=new Option('陕西','28',false,true); }
else
 { tempoption=new Option('陕西','28'); }
eval('document.'+formname+'.'+preP+'.options[28]=tempoption;');
cityareacode[27]=new Array('2801','2802','2803','2804','2805','2806','2807','2808','2809','2810');
cityareaname[27]=new Array('西安','铜川','宝鸡','咸阳','渭南','延安','汉中','榆林','商洛','安康');
if (selectP=='29')
 { a=29;tempoption=new Option('甘肃','29',false,true); }
else
 { tempoption=new Option('甘肃','29'); }
eval('document.'+formname+'.'+preP+'.options[29]=tempoption;');
cityareacode[28]=new Array('2901','2902','2903','2904','2905','2906','2907','2908','2909','2910','2911','2912','2913','2914');
cityareaname[28]=new Array('兰州','金昌','白银','天水','嘉峪关','定西','平凉','庆阳','陇南','武威','张掖','酒泉','甘南 ','临夏');
if (selectP=='30')
 { a=30;tempoption=new Option('青海','30',false,true); }
else
 { tempoption=new Option('青海','30'); }
eval('document.'+formname+'.'+preP+'.options[30]=tempoption;');
cityareacode[29]=new Array('3001','3002','3003','3004','3005','3006','3007','3008');
cityareaname[29]=new Array('西宁','海东',' 海北 ','黄南','海南','果洛','玉树','海西');
if (selectP=='31')
 { a=31;tempoption=new Option('宁夏','31',false,true); }
else
 { tempoption=new Option('宁夏','31'); }
eval('document.'+formname+'.'+preP+'.options[31]=tempoption;');
cityareacode[30]=new Array('3101','3102','3103','3104');
cityareaname[30]=new Array('银川','石嘴山','银南','固原');
if (selectP=='32')
 { a=32;tempoption=new Option('新疆','32',false,true); }
else
 { tempoption=new Option('新疆','32'); }
eval('document.'+formname+'.'+preP+'.options[32]=tempoption;');
cityareacode[31]=new Array('3201','3202','3203','3204','3205','3206','3207','3208','3209','3210','3211','3212','3213');
cityareaname[31]=new Array('乌鲁木齐','克拉玛依','石河子','吐鲁番','哈密','和田','阿克苏','喀什','克孜勒苏','巴音郭楞','昌吉','博尔塔拉','伊犁');
if (selectP=='33')
 { a=33;tempoption=new Option('香港','33',false,true); }
else
 { tempoption=new Option('香港','33'); }
eval('document.'+formname+'.'+preP+'.options[33]=tempoption;');
cityareacode[32]=new Array();
cityareaname[32]=new Array();
if (selectP=='34')
 { a=34;tempoption=new Option('澳门','34',false,true); }
else
 { tempoption=new Option('澳门','34'); }
eval('document.'+formname+'.'+preP+'.options[34]=tempoption;');
cityareacode[33]=new Array();
cityareaname[33]=new Array();
if (selectP=='35')
 { a=35;tempoption=new Option('台湾','35',false,true); }
else
 { tempoption=new Option('台湾','35'); }
eval('document.'+formname+'.'+preP+'.options[35]=tempoption;');
cityareacode[34]=new Array();
cityareaname[34]=new Array();
eval('document.'+formname+'.'+preP+'.options[a].selected=true;');
cityid=selectP;
 if (cityid!='0')
  {
  b=0;for (i=0;i<cityareaname[cityid-1].length;i++)
   {
    if (selectC==cityareacode[cityid-1][i])
    {b=i+1;tempoption=new Option(cityareaname[cityid-1][i],cityareacode[cityid-1][i],false,true);}
    else
    tempoption=new Option(cityareaname[cityid-1][i],cityareacode[cityid-1][i]);
   eval('document.'+formname+'.'+preC+'.options[i+1]=tempoption;');
   }
  eval('document.'+formname+'.'+preC+'.options[b].selected=true;');
  }
}
function selectcityarea(preP,preC,formname)
{
  cityid=eval('document.'+formname+'.'+preP+'.selectedIndex;');
  j=eval('document.'+formname+'.'+preC+'.length;');
  for (i=1;i<j;i++)
  {eval('document.'+formname+'.'+preC+'.options[j-i]=null;')}
  if (cityid!="0")
  {
   for (i=0;i<cityareaname[cityid-1].length;i++)
   {
    tempoption=new Option(cityareaname[cityid-1][i],cityareacode[cityid-1][i]);
    eval('document.'+formname+'.'+preC+'.options[i+1]=tempoption;');
   }
  }
}
</script>
<form action="" method=post name=form1>
 <img src="images/w_KT.gif" height="6" width="1"><br>
 <table width=300 border=0 cellspacing="0" cellpadding="1" !bgcolor=#FFFDE6>
 <tr> 
  <td class="black_con9" align="right">省份：</td>
  <td class="black_con9"> 
  <select name="selectp" onChange="selectcityarea('selectp','selectc','form1');">
   <option value="0" selected>不限-- 
  </select>
  </td>
 </tr>
 <tr> 
  <td class="black_con9" align="right">县/市：</td>
  <td class="black_con9"> 
  <select name="selectc">
   <option value="0" selected>不限-- 
  </select>
  </td>
 </tr>
 </table>
 </form>
<script language="javascript">
first("selectp","selectc","form1",0,0);
</script>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

js实现全国省份城市级联下拉菜单效果代码

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS操作图片(增,删,改) 例子
Apr 17 Javascript
js单例模式详解实例
Nov 21 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
解决vue打包后刷新页面报错：Unexpected token
Aug 27 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
使用compose函数优化代码提高可读性及扩展性
Jun 16 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 #Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 #Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 #Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 #Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 #Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 #Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 #Javascript
JSON(10) Qlabel(1) MapReduce(1) pygame(3) pyqt5(3) css3 (2) Slice(1) pycharm(6) linux(15) DFA(1)
You might like
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
基于empty函数的判断详解
2013/06/17 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
php 实现进制相互转换
2016/04/07 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
php之可变变量的实例详解
2017/09/12 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
Javascript的闭包
2009/12/31 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
nodejs入门教程六：express模块用法示例
2017/04/24 NodeJs
Vue自定义指令详解
2017/07/28 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
vue登录注册实例详解
2019/09/14 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
Python json模块使用实例
2015/04/11 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
什么是JNDI的上下文？如何初始化JNDI上下文
2012/03/10 面试题
生产经理的自我评价分享
2013/11/07 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
西游记读书笔记
2015/06/25 职场文书