[转载 js]城市级联菜单

这个用得很多了.觉得用ajax方法太麻烦了,还要建数据库什么的.今天在网上扒了个纯js的,所有数据都事先写好在js数组中.其实这样多方便啊,干干净净的.

好了,下面贴关键代码:

<select name="provid" id="provid" onchange="chsel();">
      <option value="0" selected="selected">-- 选择省份 --</option>
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="3">天津</option>
      <option value="4">广东</option>
      <option value="5">福建</option>
      <option value="8">海南</option>
      <option value="9">安徽</option>
      <option value="10">贵州</option>
      <option value="11">甘肃</option>
      <option value="12">广西</option>
      <option value="13">河北</option>
      <option value="14">河南</option>
      <option value="15">黑龙江</option>
      <option value="16">湖北</option>
      <option value="17">湖南</option>
      <option value="18">吉林</option>
      <option value="19">江苏</option>
      <option value="20">江西</option>
      <option value="21">辽宁</option>
      <option value="22">内蒙古</option>
      <option value="23">宁夏</option>
      <option value="24">青海</option>
      <option value="25">山东</option>
      <option value="26">山西</option>
      <option value="27">陕西</option>
      <option value="28">四川</option>
      <option value="29">西藏</option>
      <option value="30">新疆</option>
      <option value="31">云南</option>
      <option value="32">浙江</option>
      <option value="33">重庆</option>
      <option value="34">香港</option>
      <option value="35">台湾</option>
      <option value="36">澳门</option>
      </select><br>
      <select name="cityid" id="cityid">
      <option value="0" selected="selected">-- 选择城市 --</option>
   </select>

<script type="text/javascript">

// JavaScript Document
var selects=[];
selects[0]=new Array(
new Option('----','0'));
selects['1']=new Array(
new Option('北京','北京'));
selects['2']=new Array(
new Option('上海','上海'));
selects['3']=new Array(
new Option('天津','天津'));
selects['4']=new Array(
new Option('您所在的地区','0'),
new Option('广州市','广州市'),
new Option('深圳市','深圳市'),
new Option('珠海市','珠海市'),
new Option('汕头市','汕头市'),
new Option('韶关市','韶关市'),
new Option('河源市','河源市'),
new Option('梅州市','梅州市'),
new Option('汕尾市','汕尾市'),
new Option('东莞市','东莞市'),
new Option('中山市','中山市'),
new Option('江门市','江门市'),
new Option('佛山市','佛山市'),
new Option('阳江市','阳江市'),
new Option('湛江市','湛江市'),
new Option('茂名市','茂名市'),
new Option('肇庆市','肇庆市'),
new Option('清远市','清远市'),
new Option('潮州市','潮州市'),
new Option('揭阳市','揭阳市'),
new Option('云浮市','云浮市'));
selects['5']=new Array(
new Option('您所在的地区','0'),
new Option('福州市','福州市'),
new Option('厦门市','厦门市'),
new Option('三明市','三明市'),
new Option('莆田市','莆田市'),
new Option('泉州市','泉州市'),
new Option('漳州市','漳州市'),
new Option('南平市','南平市'),
new Option('龙岩市','龙岩市'),
new Option('宁德市','宁德市'));
selects['8']=new Array(
new Option('您所在的地区','0'),
new Option('海口市','海口市'),
new Option('三亚市','三亚市'),
new Option('琼山市','琼山市'),
new Option('文昌市','文昌市'),
new Option('琼海市','琼海市'),
new Option('万宁市','万宁市'),
new Option('五指山市','五指山市'),
new Option('东方市','东方市'),
new Option('儋州市','儋州市'),
new Option('临高县','临高县'),
new Option('澄迈县','澄迈县'),
new Option('定安县','定安县'),
new Option('屯昌县','屯昌县'),
new Option('昌江县','昌江县'),
new Option('白沙县','白沙县'),
new Option('琼中县','琼中县'),
new Option('陵水县','陵水县'),
new Option('保亭县','保亭县'),
new Option('乐东县','乐东县'));
selects['9']=new Array(
new Option('您所在的地区','0'),
new Option('合肥市','合肥市'),
new Option('芜湖市','芜湖市'),
new Option('蚌埠市','蚌埠市'),
new Option('淮南市','淮南市'),
new Option('马鞍山市','马鞍山市'),
new Option('淮北市','淮北市'),
new Option('铜陵市','铜陵市'),
new Option('安庆市','安庆市'),
new Option('黄山市','黄山市'),
new Option('滁州市','滁州市'),
new Option('阜阳市','阜阳市'),
new Option('宿州市','宿州市'),
new Option('巢湖市','巢湖市'),
new Option('六安市','六安市'),
new Option('亳州市','亳州市'),
new Option('池州市','池州市'),
new Option('宣城市','宣城市'));
selects['10']=new Array(
new Option('您所在的地区','0'),
new Option('贵阳市','贵阳市'),
new Option('六盘水市','六盘水市'),
new Option('遵义市','遵义市'),
new Option('安顺市','安顺市'),
new Option('铜仁地区','铜仁地区'),
new Option('毕节地区','毕节地区'),
new Option('黔西南州','黔西南州'),
new Option('黔东南州','黔东南州'),
new Option('黔南州','黔南州'));
selects['11']=new Array(
new Option('您所在的地区','0'),
new Option('兰州市','兰州市'),
new Option('金昌市','金昌市'),
new Option('白银市','白银市'),
new Option('天水市','天水市'),
new Option('嘉峪关市','嘉峪关市'),
new Option('武威市','武威市'),
new Option('张掖市','张掖市'),
new Option('平凉市','平凉市'),
new Option('酒泉市','酒泉市'),
new Option('庆阳市','庆阳市'),
new Option('定西地区','定西地区'),
new Option('陇南地区','陇南地区'),
new Option('甘南州','甘南州'),
new Option('临夏回族自治州','临夏回族自治州'));
selects['12']=new Array(
new Option('您所在的地区','0'),
new Option('南宁市','南宁市'),
new Option('柳州市','柳州市'),
new Option('桂林市','桂林市'),
new Option('梧州市','梧州市'),
new Option('北海市','北海市'),
new Option('防城港市','防城港市'),
new Option('钦州市','钦州市'),
new Option('贵港市','贵港市'),
new Option('玉林市','玉林市'),
new Option('百色市','百色市'),
new Option('贺州市','贺州市'),
new Option('河池市','河池市'),
new Option('来宾市','来宾市'),
new Option('崇左市','崇左市'));
selects['13']=new Array(
new Option('您所在的地区','0'),
new Option('石家庄市','石家庄市'),
new Option('唐山市','唐山市'),
new Option('秦皇岛市','秦皇岛市'),
new Option('邯郸市','邯郸市'),
new Option('邢台市','邢台市'),
new Option('保定市','保定市'),
new Option('张家口市','张家口市'),
new Option('承德市','承德市'),
new Option('廊坊市','廊坊市'),
new Option('衡水市','衡水市'));
selects['14']=new Array(
new Option('您所在的地区','0'),
new Option('郑州市','郑州市'),
new Option('开封市','开封市'),
new Option('洛阳市','洛阳市'),
new Option('平顶山市','平顶山市'),
new Option('焦作市','焦作市'),
new Option('鹤壁市','鹤壁市'),
new Option('新乡市','新乡市'),
new Option('安阳市','安阳市'),
new Option('濮阳市','濮阳市'),
new Option('许昌市','许昌市'),
new Option('漯河市','漯河市'),
new Option('三门峡市','三门峡市'),
new Option('南阳市','南阳市'),
new Option('商丘市','商丘市'),
new Option('信阳市','信阳市'),
new Option('周口市','周口市'),
new Option('驻马店市','驻马店市'),
new Option('济源市','济源市'));
selects['15']=new Array(
new Option('您所在的地区','0'),
new Option('哈尔滨市','哈尔滨市'),
new Option('齐齐哈尔市','齐齐哈尔市'),
new Option('鹤岗市','鹤岗市'),
new Option('双鸭山市','双鸭山市'),
new Option('鸡西市','鸡西市'),
new Option('大庆市','大庆市'),
new Option('伊春市','伊春市'),
new Option('牡丹江市','牡丹江市'),
new Option('佳木斯市','佳木斯市'),
new Option('七台河市','七台河市'),
new Option('黑河市','黑河市'),
new Option('绥化市','绥化市'),
new Option('大兴安岭地区','大兴安岭地区'));
selects['16']=new Array(
new Option('您所在的地区','0'),
new Option('武汉市','武汉市'),
new Option('黄石市','黄石市'),
new Option('襄樊市','襄樊市'),
new Option('十堰市','十堰市'),
new Option('荆州市','荆州市'),
new Option('宜昌市','宜昌市'),
new Option('荆门市','荆门市'),
new Option('鄂州市','鄂州市'),
new Option('孝感市','孝感市'),
new Option('黄冈市','黄冈市'),
new Option('咸宁市','咸宁市'),
new Option('随州市','随州市'),
new Option('恩施州','恩施州'),
new Option('仙桃市','仙桃市'),
new Option('天门市','天门市'),
new Option('潜江市','潜江市'),
new Option('神农架林区','神农架林区'));
selects['17']=new Array(
new Option('您所在的地区','0'),
new Option('长沙市','长沙市'),
new Option('株洲市','株洲市'),
new Option('湘潭市','湘潭市'),
new Option('衡阳市','衡阳市'),
new Option('邵阳市','邵阳市'),
new Option('岳阳市','岳阳市'),
new Option('常德市','常德市'),
new Option('张家界市','张家界市'),
new Option('益阳市','益阳市'),
new Option('郴州市','郴州市'),
new Option('永州市','永州市'),
new Option('怀化市','怀化市'),
new Option('娄底市','娄底市'),
new Option('湘西州','湘西州'));
selects['18']=new Array(
new Option('您所在的地区','0'),
new Option('长春市','长春市'),
new Option('吉林市','吉林市'),
new Option('四平市','四平市'),
new Option('辽源市','辽源市'),
new Option('通化市','通化市'),
new Option('白山市','白山市'),
new Option('延边州','延边州'));
selects['19']=new Array(
new Option('您所在的地区','0'),
new Option('南京市','南京市'),
new Option('徐州市','徐州市'),
new Option('连云港市','连云港市'),
new Option('淮安市','淮安市'),
new Option('宿迁市','宿迁市'),
new Option('盐城市','盐城市'),
new Option('扬州市','扬州市'),
new Option('泰州市','泰州市'),
new Option('南通市','南通市'),
new Option('镇江市','镇江市'),
new Option('常州市','常州市'),
new Option('无锡市','无锡市'),
new Option('苏州市','苏州市'));
selects['20']=new Array(
new Option('您所在的地区','0'),
new Option('南昌市','南昌市'),
new Option('景德镇市','景德镇市'),
new Option('萍乡市','萍乡市'),
new Option('九江市','九江市'),
new Option('新余市','新余市'),
new Option('鹰潭市','鹰潭市'),
new Option('赣州市','赣州市'),
new Option('吉安市','吉安市'),
new Option('宜春市','宜春市'),
new Option('抚州市','抚州市'),
new Option('上饶市','上饶市'));
selects['21']=new Array(
new Option('您所在的地区','0'),
new Option('沈阳市','沈阳市'),
new Option('大连市','大连市'),
new Option('鞍山市','鞍山市'),
new Option('抚顺市','抚顺市'),
new Option('本溪市','本溪市'),
new Option('丹东市','丹东市'),
new Option('锦州市','锦州市'),
new Option('葫芦岛市','葫芦岛市'),
new Option('营口市','营口市'),
new Option('盘锦市','盘锦市'),
new Option('阜新市','阜新市'),
new Option('辽阳市','辽阳市'),
new Option('铁岭市','铁岭市'),
new Option('朝阳市','朝阳市'));
selects['22']=new Array(
new Option('您所在的地区','0'),
new Option('呼和浩特市','呼和浩特市'),
new Option('包头市','包头市'),
new Option('乌海市','乌海市'),
new Option('赤峰市','赤峰市'),
new Option('鄂尔多斯市','鄂尔多斯市'),
new Option('呼伦贝尔市','呼伦贝尔市'),
new Option('乌兰察布盟','乌兰察布盟'),
new Option('锡林郭勒盟','锡林郭勒盟'),
new Option('阿拉善盟','阿拉善盟'),
new Option('兴安盟','兴安盟'),
new Option('通辽市','通辽市'),
new Option('巴彦淖尔盟','巴彦淖尔盟'));
selects['23']=new Array(
new Option('您所在的地区','0'),
new Option('银川市','银川市'),
new Option('石嘴山市','石嘴山市'),
new Option('吴忠市','吴忠市'),
new Option('固原市','固原市'));
selects['24']=new Array(
new Option('您所在的地区','0'),
new Option('西宁市','西宁市'),
new Option('海东地区','海东地区'),
new Option('海北州','海北州'),
new Option('海南州','海南州'),
new Option('果洛州','果洛州'),
new Option('玉树州','玉树州'),
new Option('海西州','海西州'));
selects['25']=new Array(
new Option('您所在的地区','0'),
new Option('济南市','济南市'),
new Option('青岛市','青岛市'),
new Option('淄博市','淄博市'),
new Option('枣庄市','枣庄市'),
new Option('东营市','东营市'),
new Option('潍坊市','潍坊市'),
new Option('烟台市','烟台市'),
new Option('威海市','威海市'),
new Option('济宁市','济宁市'),
new Option('泰安市','泰安市'),
new Option('日照市','日照市'),
new Option('莱芜市','莱芜市'),
new Option('临沂市','临沂市'),
new Option('德州市','德州市'),
new Option('聊城市','聊城市'),
new Option('滨州市','滨州市'),
new Option('菏泽市','菏泽市'));
selects['26']=new Array(
new Option('您所在的地区','0'),
new Option('太原市','太原市'),
new Option('大同市','大同市'),
new Option('阳泉市','阳泉市'),
new Option('长治市','长治市'),
new Option('晋城市','晋城市'),
new Option('朔州市','朔州市'),
new Option('晋中市','晋中市'),
new Option('运城市','运城市'),
new Option('忻州市','忻州市'),
new Option('临汾市','临汾市'),
new Option('吕梁地区','吕梁地区'));
selects['27']=new Array(
new Option('您所在的地区','0'),
new Option('西安市','西安市'),
new Option('铜川市','铜川市'),
new Option('宝鸡市','宝鸡市'),
new Option('咸阳市','咸阳市'),
new Option('渭南市','渭南市'),
new Option('延安市','延安市'),
new Option('汉中市','汉中市'),
new Option('榆林市','榆林市'),
new Option('安康市','安康市'),
new Option('商洛市','商洛市'));
selects['28']=new Array(
new Option('您所在的地区','0'),
new Option('成都市','成都市'),
new Option('自贡市','自贡市'),
new Option('攀枝花市','攀枝花市'),
new Option('泸州市','泸州市'),
new Option('德阳市','德阳市'),
new Option('绵阳市','绵阳市'),
new Option('广元市','广元市'),
new Option('遂宁市','遂宁市'),
new Option('内江市','内江市'),
new Option('乐山市','乐山市'),
new Option('南充市','南充市'),
new Option('宜宾市','宜宾市'),
new Option('广安市','广安市'),
new Option('达州市','达州市'),
new Option('眉山市','眉山市'),
new Option('雅安市','雅安市'),
new Option('巴中市','巴中市'),
new Option('资阳市','资阳市'),
new Option('阿坝州','阿坝州'),
new Option('甘孜州','甘孜州'),
new Option('凉山州','凉山州'));
selects['29']=new Array(
new Option('您所在的地区','0'),
new Option('拉萨市','拉萨市'),
new Option('那曲地区','那曲地区'),
new Option('昌都地区','昌都地区'),
new Option('山南地区','山南地区'),
new Option('日喀则地区','日喀则地区'),
new Option('阿里地区','阿里地区'),
new Option('林芝地区','林芝地区'));
selects['30']=new Array(
new Option('您所在的地区','0'),
new Option('乌鲁木齐市','乌鲁木齐市'),
new Option('石河子市','石河子市'),
new Option('阿拉尔市','阿拉尔市'),
new Option('图木舒克市','图木舒克市'),
new Option('五家渠市','五家渠市'),
new Option('吐鲁番地区','吐鲁番地区'),
new Option('哈密地区','哈密地区'),
new Option('和田地区','和田地区'),
new Option('喀什地区','喀什地区'),
new Option('克孜勒苏州','克孜勒苏州'),
new Option('巴音郭楞州','巴音郭楞州'),
new Option('昌吉州','昌吉州'),
new Option('伊犁州','伊犁州'),
new Option('塔城地区','塔城地区'),
new Option('阿勒泰州','阿勒泰州'),
new Option('博尔塔拉州','博尔塔拉州'),
new Option('阿克苏地区','阿克苏地区'));
selects['31']=new Array(
new Option('您所在的地区','0'),
new Option('昆明市','昆明市'),
new Option('曲靖市','曲靖市'),
new Option('玉溪市','玉溪市'),
new Option('保山市','保山市'),
new Option('昭通市','昭通市'),
new Option('思茅地区','思茅地区'),
new Option('临沧地区','临沧地区'),
new Option('丽江地区','丽江地区'),
new Option('文山州','文山州'),
new Option('红河州','红河州'),
new Option('西双版纳州','西双版纳州'),
new Option('楚雄州','楚雄州'),
new Option('大理州','大理州'),
new Option('德宏州','德宏州'),
new Option('怒江州','怒江州'),
new Option('迪庆州','迪庆州'));
selects['32']=new Array(
new Option('您所在的地区','0'),
new Option('杭州市','杭州市'),
new Option('宁波市','宁波市'),
new Option('温州市','温州市'),
new Option('嘉兴市','嘉兴市'),
new Option('湖州市','湖州市'),
new Option('绍兴市','绍兴市'),
new Option('金华市','金华市'),
new Option('衢州市','衢州市'),
new Option('舟山市','舟山市'),
new Option('台州市','台州市'),
new Option('丽水市','丽水市'));
selects['33']=new Array(
new Option('重庆','重庆'));
selects['34']=new Array(
new Option('香港','香港'));
selects['35']=new Array(
new Option('您所在的地区','0'),
new Option('台北市','台北市'),
new Option('高雄市','高雄市'),
new Option('基隆市','基隆市'),
new Option('台中市','台中市'),
new Option('台南市','台南市'),
new Option('新竹市','新竹市'),
new Option('嘉义市','嘉义市'),
new Option('北县','北县'),
new Option('板桥市','板桥市'),
new Option('宜兰县','宜兰县'),
new Option('宜兰市','宜兰市'),
new Option('桃园县','桃园县'),
new Option('桃园市','桃园市'),
new Option('新竹县','新竹县'),
new Option('竹北市','竹北市'),
new Option('苗栗县','苗栗县'),
new Option('苗栗市','苗栗市'),
new Option('台中县','台中县'),
new Option('丰原市','丰原市'),
new Option('彰化县','彰化县'),
new Option('彰化市','彰化市'),
new Option('南投县','南投县'),
new Option('南投市','南投市'),
new Option('云林县','云林县'),
new Option('斗六市','斗六市'),
new Option('嘉义县','嘉义县'),
new Option('太保市','太保市'),
new Option('台南县','台南县'),
new Option('新营市','新营市'),
new Option('高雄县','高雄县'),
new Option('凤山市','凤山市'),
new Option('屏东县','屏东县'),
new Option('屏东市','屏东市'),
new Option('澎湖县','澎湖县'),
new Option('马东市','马东市'),
new Option('台东县','台东县'),
new Option('台东市','台东市'),
new Option('花莲县','花莲县'),
new Option('花莲市','花莲市'),
new Option('金门县','金门县'),
new Option('连江县','连江县'));
selects['36']=new Array(
new Option('澳门','澳门'));
function chsel(){
pro=document.getElementById("provid");
city=document.getElementById("cityid");
alert(city);
if(pro.value) {
   city.options.length=0;
   for(var i=0;i<selects[pro.value].length;i++){
   city.options.add(selects[pro.value][i]);
   }
}
}

</script>

posted on 2008-05-23 12:12  真阿当  阅读(128)  评论(0编辑  收藏  举报