首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

半抄半写,终于实现了省市联动选择,新有关问题来了。怎么实现2个省市联动

2012-02-27 
半抄半写,终于实现了省市联动选择,新问题来了。如何实现2个省市联动?半抄半写,终于实现了省市联动选择,新问

半抄半写,终于实现了省市联动选择,新问题来了。如何实现2个省市联动?
半抄半写,终于实现了省市联动选择,新问题来了。我这个表单里需要两个省市联动。用户注册的时候需要提交“目前工作地点”(1个省市联动),还要提交“希望工作地点”(1个省市联动)。但目前只调试成功一个,第二个“希望工作地点”这个联动不知道怎么加了。

代码如下:哪位大哥帮我看看啊,困扰我很长时间了啊。谢谢啊
<SCRIPT language=javascript>
   

var pList = new Object();
   pList['北京'] = ['市区','门头沟区','房山区','顺义区','通州区','昌平区','密云县','延庆县','大兴县','怀柔县','平谷县'];
   pList['上海'] = ['上海'];
   pList['天津'] = ['市区','西青区','塘沽区','北辰区','汉沽区','大港区','东丽区','津南区','宝坻区','武清区','静海县','宁河县','蓟县'];
   pList['重庆'] = ['重庆'];
   pList['香港'] = ['香港'];
   pList['澳门'] = ['澳门'];
   pList['山东'] = ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照', '莱芜', '临沂', '德州', '聊城', '滨州', '菏泽'];
   pList['河北'] = ['石家庄', '邯郸', '邢台', '保定', '张家口', '承德', '廊坊', '唐山', '秦皇岛', '沧州', '衡水'];
   pList['山西'] = ['太原', '大同', '阳泉', '长治', '晋城', '朔州', '吕梁', '忻州', '晋中', '临汾', '运城'];
   pList['黑龙江'] = ['哈尔滨', '齐齐哈尔', '牡丹江', '佳木斯', '大庆', '绥化', '鹤岗', '鸡西', '黑河', '双鸭山', '伊春', '七台河', '大兴安岭'];
   pList['吉林'] = ['长春', '吉林', '四平', '辽源', '通化', '白山', '松原', '白城', '延边'];
   pList['辽宁'] = ['沈阳', '大连', '鞍山', '抚顺', '本溪', '丹东', '锦州', '营口', '阜新', '辽阳', '盘锦', '铁岭', '朝阳', '葫芦岛'];
   pList['内蒙古'] = ['呼和浩特', '包头', '乌海', '赤峰', '呼伦贝尔盟', '阿拉善盟', '哲里木盟', '兴安盟', '乌兰察布盟', '锡林郭勒盟', '巴彦淖尔盟', '伊克昭盟'];
   pList['江苏'] = ['南京', '镇江', '苏州', '南通', '扬州', '盐城', '徐州', '连云港', '常州', '无锡', '宿迁', '泰州', '淮安'];
   pList['浙江'] = ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'];
   pList['安徽'] = ['合肥', '芜湖', '蚌埠', '马鞍山', '淮北', '铜陵', '安庆', '黄山', '滁州', '宿州', '池州', '淮南', '巢湖', '阜阳', '六安', '宣城', '亳州'];
   pList['福建'] = ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'];
   pList['江西'] = ['南昌', '景德镇', '九江', '鹰潭', '萍乡', '新馀', '赣州', '吉安', '宜春', '抚州', '上饶'];
   pList['河南'] = ['郑州', '开封', '洛阳', '平顶山', '安阳', '鹤壁', '新乡', '焦作', '濮阳', '许昌', '漯河', '三门峡', '南阳', '商丘', '信阳', '周口', '驻马店', '济源'];
   pList['湖北'] = ['武汉', '宜昌', '荆州', '襄樊', '黄石', '荆门', '黄冈', '十堰', '恩施', '潜江', '天门', '仙桃', '随州', '咸宁', '孝感', '鄂州'];
   pList['湖南'] = ['长沙', '常德', '株洲', '湘潭', '衡阳', '岳阳', '邵阳', '益阳', '娄底', '怀化', '郴州', '永州', '湘西', '张家界'];
   pList['广东'] = ['广州', '深圳', '珠海', '汕头', '东莞', '中山', '佛山', '韶关', '江门', '湛江', '茂名', '肇庆', '惠州', '梅州', '汕尾', '河源', '阳江', '清远', '潮州', '揭阳', '云浮'];
   pList['广西'] = ['南宁', '柳州', '桂林', '梧州', '北海', '防城港', '钦州', '贵港', '玉林', '南宁地区', '柳州地区', '贺州', '百色', '河池'];
   pList['海南'] = ['海口', '三亚'];
   pList['四川'] =['成都', '绵阳', '德阳', '自贡', '攀枝花', '广元', '内江', '乐山', '南充', '宜宾', '广安', '达川', '雅安', '眉山', '甘孜', '凉山', '泸州'];
   pList['贵州'] = ['贵阳', '六盘水', '遵义', '安顺', '铜仁', '黔西南', '毕节', '黔东南', '黔南'];
   pList['云南'] = ['昆明', '大理', '曲靖', '玉溪', '昭通', '楚雄', '红河', '文山', '思茅', '西双版纳', '保山', '德宏', '丽江', '怒江', '迪庆', '临沧'];
   pList['西藏'] = ['拉萨', '日喀则', '山南', '林芝', '昌都', '阿里', '那曲'];
   pList['陕西'] = ['西安', '宝鸡', '咸阳', '铜川', '渭南', '延安', '榆林', '汉中', '安康', '商洛'];
   pList['甘肃'] = ['兰州', '嘉峪关', '金昌', '白银', '天水', '酒泉', '张掖', '武威', '定西', '陇南', '平凉', '庆阳', '临夏', '甘南'];
   pList['宁夏'] = ['银川', '石嘴山', '吴忠', '固原'];
   pList['青海'] = ['西宁', '海东', '海南', '海北', '黄南', '玉树', '果洛', '海西'];
   pList['新疆'] = ['乌鲁木齐', '石河子', '克拉玛依', '伊犁', '巴音郭勒', '昌吉', '克孜勒苏柯尔克孜', '博 尔塔拉', '吐鲁番', '哈密', '喀什', '和田', '阿克苏'];
   pList['台湾'] = ['台北', '高雄', '台中', '台南', '屏东', '南投', '云林', '新竹', '彰化', '苗栗', '嘉义', '花莲', '桃园', '宜兰', '基隆', '台东', '金门', '马祖', '澎湖'];
  
  
   function chgSelect(){
   var pSelect = document.all['pSelect'];
   var cSelect = document.all['cSelect'];
   var pValue = pSelect.options[pSelect.selectedIndex].value;
   for (var x=cSelect.options.length-1; x>=0; x--) cSelect.options[x] = null; 
   for (var i in pList) {
   if (i == pValue) {
   for (var j in pList[i]) {
   cSelect.options.add(new Option(pList[i][j], pList[i][j]));
   }
   }
   }
   }
  window.onload = function() {
   var oBool = false;
   var pSelect = document.all['pSelect'];
   var cSelect = document.all['cSelect'];


     for (var i in pList) {
   pSelect.options.add(new Option(i, i));
   if (!oBool) {
   for (var j in pList[i]) {
   cSelect.options.add(new Option(pList[i][j], pList[i][j]));
   }
   oBool = true;
   }
   }
   pSelect.selectedIndex = 0;
   cSelect.selectedIndex = 0;
   }

 </SCRIPT>

<body>
<table><tr> 
  <td class="table"><div align="right">现工作地点:</div></td>
  <td class="table"><select id="pSelect" name="province" onchange="chgSelect();"></select><select id="cSelect" name="city"></select></td>
  <td>&nbsp;</td>
  </tr>
  <tr> 
  <td><div align="right">希望工作地点: </div></td>
  <td class="table">??????</td>
  <td>&nbsp;</td>
  </tr></table>

[解决办法]

JScript code
var Province_City="请选择-请选择--@--安徽-合肥|蚌埠|亳州|巢湖|滁州|阜阳|淮北|淮南|黄山|界首|六安|马鞍山|宁国|宿州|天长|铜陵|宣城|安庆--@--澳门-澳门--@--北京-北京--@--福建-福安|福鼎|福清|福州|建瓯|建阳|晋江|龙岩|南安|南平|宁德|莆田|泉州|三明|邵武|石狮|武夷山|厦门|永安|漳平|漳州--@--甘肃-定西|敦煌|嘉峪关|金昌|酒泉|兰州|临夏|平凉|庆阳|天水|武威|玉门|张掖--@--广东-潮阳|潮州|澄海|从化|东莞|恩平|番禺|佛山|高明|广州|河源|鹤山|惠阳|惠州|江门|揭阳|开平|乐昌|茂名|梅州|南海|南雄|清远|三水|汕头|汕尾|韶关|深圳|顺德|四会|台山|新会|阳江|云浮|湛江|肇庆|中山|珠海--@--广西-百色|北海|北流|贵港|桂林|桂平|河池|贺州|柳州|南宁|凭祥|钦州|梧州|阳朔|玉林--@--贵州-安顺|毕节|都匀|贵阳|凯里|六盘水|仁怀|铜仁|兴义|遵义--@--海南-海口--@--河北-保定|北戴河|沧州|承德|藁城|邯郸|衡水|黄骅|廊坊|秦皇岛|任丘|石家庄|唐山|邢台|张家口|涿州|遵化--@--河南-安阳|长葛|登封|邓州|巩义|鹤壁|济源|焦作|开封|灵宝|洛阳|漯河|南阳|平顶山|濮阳|沁阳|汝州|三门峡|商丘|项城|新乡|信阳|许昌|偃师|荥阳|禹州|郑州|周口|驻马店--@--黑龙江-阿城|北安|大庆|大兴安岭|哈尔滨|海林|鹤岗|黑河|虎林|鸡西|佳木斯|密山|牡丹江|宁安|七台河|齐齐哈尔|尚志|双鸭山|绥芬河|绥化|铁力|伊春--@--湖北-安陆|大冶|丹江口|当阳|鄂州|恩施|广水|汉川|洪湖|黄冈|黄石|荆门|荆州|老河口|麻城|潜江|十堰|石首|松滋|随州|天门|武汉|武穴|仙桃|咸宁|襄樊|孝感|宜昌|枣阳|钟祥--@--湖南-长沙|常德|常宁|郴州|衡阳|怀化|吉首|冷水江|涟源|娄底|韶山|邵阳|湘潭|益阳|永州|岳阳|张家界|株洲|资兴--@--吉林-白城|白山|长春|大安|敦化|吉林|集安|蛟河|辽源|临江|龙井|梅河口|舒兰|四平|松原|通化|延吉--@--江苏-常熟|常州|大丰|丹阳|东台|高邮|海门|淮安|江都|江阴|金坛|靖江|句容|昆山|溧阳|连云港|南京|南通|启东|如皋|苏州|宿迁|太仓|泰兴|泰州|同里|吴江|武进|新沂|徐州|盐城|扬中|扬州|仪征|宜兴|张家港|镇江|周庄--@--江西-丰城|抚州|赣州|贵溪|吉安|井冈山|景德镇|九江|庐山|南昌|萍乡|上饶|新余|宜春|鹰潭--@--辽宁-鞍山|本溪|朝阳|大连|丹东|抚顺|阜新|葫芦岛|锦州|开原|辽阳|盘锦|沈阳|铁岭|兴城|营口--@--内蒙古-包头|赤峰|二连浩特|呼和浩特|集宁|通辽|乌海|乌兰浩特|锡林浩特|扎兰屯--@--宁夏-银川--@--青海-德令哈|格尔木|海东|西宁--@--山东-滨州|德州|东营|菏泽|即墨|济南|济宁|胶南|胶州|莱芜|莱阳|莱州|聊城|临沂|龙口|蓬莱|平度|青岛|青州|曲阜|日照|乳山|泰安|威海|潍坊|文登|烟台|兖州|枣庄|淄博--@--山西-长治|大同|侯马|晋城|离石|临汾|朔州|太原|忻州|阳泉|运城--@--陕西-安康|宝鸡|韩城|汉中|华阴|铜川|渭南|西安|咸阳|延安|榆林--@--上海-上海|黄浦|卢湾|徐汇|长宁|静安|普陀|闸北|虹口|杨浦|闵行|宝山|嘉定|浦东新区|金山|松江|青浦|南汇|奉贤|崇明--@--四川-巴中|成都|德阳|都江堰|峨眉山|广安|广汉|广元|江油|九寨沟|阆中|乐山|泸州|眉山|绵阳|绵竹|内江|南充|攀枝花|邛崃|遂宁|西昌|雅安|宜宾|资阳|自贡--@--台湾-台湾--@--天津-天津--@--西藏-昌都|拉萨|林芝|那曲|日喀则|山南--@--香港-香港--@--新疆-哈密|喀什|克拉玛依|石河子|吐鲁番|乌鲁木齐|伊宁--@--云南-保山|楚雄|大理|个旧|景洪|开远|昆明|丽江|临沧|潞西|曲靖|瑞丽|思茅|西双版纳|玉溪|昭通--@--浙江-杭州|湖州|富阳|海宁|安吉|慈溪|东阳|奉化|黄岩|嘉兴|建德|江山|金华|兰溪|乐清|丽水|临安|临海|龙泉|宁波|平湖|千岛湖|衢州|瑞安|上虞|嵊州|台州|桐乡|温岭|温州|义乌|永康|余姚|舟山|诸暨--@--重庆-重庆"function SelCity(Province,Province1,City,City1){    var iPCity = Province_City.split("--@--");    var iProvince="",iCity ="",iV="";    for(i=0;i<iPCity.length;i++){        iProvince=iPCity[i].split("-")[0];//省份        iV = iProvince;        if(iV == "请选择")iV="";        if(iCity==""){iCity=iPCity[i].split("-")[1].split("|");}//默认城市显示        document.getElementById(Province).options[i]=new Option(iProvince,iV);//载入省份        if (document.getElementById(Province).options[i].value==Province1 ){            document.getElementById(Province).selectedIndex = i;            iCity=iPCity[i].split("-")[1].split("|");//省份对应的城市        }    }    document.getElementById(City).options.length = 0;//初始化城市列表    //加载城市数据    for(i=0;i<iCity.length;i++){        iV = iCity[i];        if(iV == "请选择") iV="";        document.getElementById(City).options[i]=new Option(iCity[i],iV)        if (document.getElementById(City).options[i].value==City1 )document.getElementById(City).selectedIndex = i;}} 


[解决办法]
厉害,这么多数据,怎么找啊???
二级联动 我们一般采用ajax .....
数据存在数据库中
不过你们这样写好了,以后我也可以直接用了
毕竟从数据库中取 速度上可能会慢一点

[解决办法]

HTML code
<html><head><title>省市联动选择框</title><script>  var pProvince = ['北京','上海','天津','重庆','香港','澳门','山东','河北','山西','黑龙江','吉林','辽宁','内蒙古','江苏','浙江','安徽','福建',                   '江西','河南','湖北','湖南','广东','广西','海南','四川','贵州','云南','西藏','陕西','甘肃','宁夏','青海','新疆','台湾'];  var pList = [['市区','门头沟区','房山区','顺义区','通州区','昌平区','密云县','延庆县','大兴县','怀柔县','平谷县'],               ['上海'],               ['市区','西青区','塘沽区','北辰区','汉沽区','大港区','东丽区','津南区','宝坻区','武清区','静海县','宁河县','蓟县'],               ['重庆'],               ['香港'],               ['澳门'],               ['济南','青岛','淄博','枣庄','东营','烟台','潍坊','济宁','泰安','威海','日照','莱芜','临沂','德州','聊城','滨州','菏泽'],               ['石家庄','邯郸','邢台','保定','张家口','承德','廊坊','唐山','秦皇岛','沧州','衡水'],               ['太原','大同','阳泉','长治','晋城','朔州','吕梁','忻州','晋中','临汾','运城'],               ['哈尔滨','齐齐哈尔','牡丹江','佳木斯','大庆','绥化','鹤岗','鸡西','黑河','双鸭山','伊春','七台河','大兴安岭'],               ['长春','吉林','四平','辽源','通化','白山','松原','白城','延边'],               ['沈阳','大连','鞍山','抚顺','本溪','丹东','锦州','营口','阜新','辽阳','盘锦','铁岭','朝阳','葫芦岛'],               ['呼和浩特','包头','乌海','赤峰','呼伦贝尔盟','阿拉善盟','哲里木盟','兴安盟','乌兰察布盟','锡林郭勒盟','巴彦淖尔盟','伊克昭盟'],               ['南京','镇江','苏州','南通','扬州','盐城','徐州','连云港','常州','无锡','宿迁','泰州','淮安'],               ['杭州','宁波','温州','嘉兴','湖州','绍兴','金华','衢州','舟山','台州','丽水'],               ['合肥','芜湖','蚌埠','马鞍山','淮北','铜陵','安庆','黄山','滁州','宿州','池州','淮南','巢湖','阜阳','六安','宣城','亳州'],               ['福州','厦门','莆田','三明','泉州','漳州','南平','龙岩','宁德'],               ['南昌','景德镇','九江','鹰潭','萍乡','新馀','赣州','吉安','宜春','抚州','上饶'],               ['郑州','开封','洛阳','平顶山','安阳','鹤壁','新乡','焦作','濮阳','许昌','漯河','三门峡','南阳','商丘','信阳','周口','驻马店','济源'],               ['武汉','宜昌','荆州','襄樊','黄石','荆门','黄冈','十堰','恩施','潜江','天门','仙桃','随州','咸宁','孝感','鄂州'],               ['长沙','常德','株洲','湘潭','衡阳','岳阳','邵阳','益阳','娄底','怀化','郴州','永州','湘西','张家界'],               ['广州','深圳','珠海','汕头','东莞','中山','佛山','韶关','江门','湛江','茂名','肇庆','惠州','梅州','汕尾','河源','阳江','清远','潮州','揭阳','云浮'],               ['南宁','柳州','桂林','梧州','北海','防城港','钦州','贵港','玉林','南宁地区','柳州地区','贺州','百色','河池'],               ['海口','三亚'],               ['成都','绵阳','德阳','自贡','攀枝花','广元','内江','乐山','南充','宜宾','广安','达川','雅安','眉山','甘孜','凉山','泸州'],               ['贵阳','六盘水','遵义','安顺','铜仁','黔西南','毕节','黔东南','黔南'],               ['昆明','大理','曲靖','玉溪','昭通','楚雄','红河','文山','思茅','西双版纳','保山','德宏','丽江','怒江','迪庆','临沧'],               ['拉萨','日喀则','山南','林芝','昌都','阿里','那曲'],               ['西安','宝鸡','咸阳','铜川','渭南','延安','榆林','汉中','安康','商洛'],               ['兰州','嘉峪关','金昌','白银','天水','酒泉','张掖','武威','定西','陇南','平凉','庆阳','临夏','甘南'],               ['银川','石嘴山','吴忠','固原'],               ['西宁','海东','海南','海北','黄南','玉树','果洛','海西'],               ['乌鲁木齐','石河子','克拉玛依','伊犁','巴音郭勒','昌吉','克孜勒苏柯尔克孜','博尔塔拉','吐鲁番','哈密','喀什','和田','阿克苏'],               ['台北','高雄','台中','台南','屏东','南投','云林','新竹','彰化','苗栗','嘉义','花莲','桃园','宜兰','基隆','台东','金门','马祖','澎湖']];  function init(){    var ld_div = document.getElementById("ld_div");    ld_div.innerHTML = "省:<select id='s1' onchange='changeProv(this.value)'></select>&nbsp;市:<select id='s2' onchange='changeCity(this.value)'></select>";    var prov = document.getElementById("s1");    for (var i = 0; i < pProvince.length; i++){      prov.options.add(new Option(pProvince[i],i));    }    var city = document.getElementById("s2");    for (var i = 0; i < pList[0].length; i++){      city.options.add(new Option(pList[0][i],i));    }  }  function changeProv(id){    var city = document.getElementById("s2");    clearSelect(city);    for (var i = 0; i < pList[id].length; i++){      city.options.add(new Option(pList[id][i],i));    }    showInfo();  }  function changeCity(id){    showInfo();  }  function clearSelect(select){    select.options.length = 0;  }  function showInfo(){    var info = document.getElementById("info_div");    var prov = document.getElementById("s1");    var city = document.getElementById("s2");    info.innerHTML = "你选择的是[" + prov.options[prov.value].text + "]省(市)[" + city.options[city.value].text + "]市(区/县).";  }</script></head><body onload="init();"><div id='ld_div'></div><div id='info_div'></div></body></html> 

热点排行