首页
所有分类
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 相关文章推荐
走出JavaScript初学困境—js初学
Dec 29 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
详解小程序之简单登录注册表单验证
May 13 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
电台频率(32) KDKA(1) 收音机(62) Harman Kardon(1) ad hoc(1) 调频(4) 中波(3) 保养(1) 立体声(1) 长波(3)
You might like
php清空（删除）指定目录下的文件，不删除目录文件夹的实现代码
2014/09/04 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
利用Angular+Angular-Ui实现分页（代码加简单）
2017/03/10 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
python列表的常用操作方法小结
2016/05/21 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
Django配置跨域并开发测试接口
2020/11/04 Python
StubHub澳大利亚：购买或出售您的门票
2019/08/01 全球购物
业务经理的岗位职责
2013/11/16 职场文书
30岁生日感言
2014/01/25 职场文书
年终总结会议主持词
2014/03/17 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL