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程序设计有所帮助。

Javascript 相关文章推荐
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 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
You might like
php正则校验用户名介绍
2008/07/19 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
php中strtotime函数性能分析
2016/11/20 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
JS判断数组那点事
2017/10/10 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
python3个性签名设计实现代码
2018/06/19 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
《赠汪伦》教学反思
2014/04/12 职场文书
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸
mysql如何查询连续记录
2022/05/11 MySQL