省份及市区相关的二极下拉菜单

这个问题十分适合用XML来做。

解决方案 »

  1.   

    <body>
    <h2>实际应用中XML文件可以放在外部文件中，IE6测试通过</h2>
    <xml id="doc">
    <data>
     <province name="广东">
      <city>广州</city>
      <city>深圳</city>
      <city>汕头</city>
     </province> <province name="吉林">
      <city>长春</city>
      <city>四平</city>
      <city>吉林</city>
      <city>白城</city>
     </province> <province name="河南">
      <city>郑州</city>
      <city>洛阳</city>
      <city>开封</city>
      <city>安阳</city>
     </province>
    </data>
    </xml>
    <select id=prov onchange="docity()">
    <option value="0">--- 请选择省份 ---</option>
    </select>
    <select id=city>
    </select><script language="JavaScript">
    function init(){
     var v1 = doc.getElementsByTagName("province");
     for(var i =0; i<v1.length;i++){
      var e = document.createElement("OPTION");
      e.innerText = e.value = v1[i].getAttribute("name");
      prov.appendChild(e);
     }
    }
    function docity(){
     var sf = prov.value;
     var str="//province[@name='"+sf+"']";
     var v = doc.selectSingleNode(str);
     if(!v){ alert("没有符合条件的记录！");return;}
     city.innerHTML = "";
     var v1 = v.selectNodes("city")
     for(var i =0; i<v1.length;i++){
      var e = document.createElement("OPTION");
      e.innerText = e.value = v1[i].text;
      city.appendChild(e);
     }
    }
    init();
    </script>
    </body>
      

  2.   

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

  3.   

    从flyly以前给我的代码里面抽出来的省市列表，有可能有遗漏或者错误，请有发现的给我发个短消息。
      

  4.   

    呵呵~~ 还是用 xml 写起来简单啊.. ... 找到个小 bug (其实也不算bug)
    选择了省份后, 再选回默认项.. 就弹出个窗口说没找到记录.(这是没错的)
    但按常理来说, 点这个,应该任何反应都没有的. 
    我加了句..  if(sf==0) return false; 后, 你的程序就比较完美了. ^_^另外,想问下, 怎样把 xml 放在单独的文件, 然后再在这个页引入? #include  可以么?.....
      

  5.   

    使用xml外部文件作为html中的数据岛：
    <XML id=doc SRC="xmlFile.xml"></XML>
    xml文件应当按照标准格式写：
    <?xml version="1.0" encoding="gb2312" ?>
    <data>
     <province>
     ...
     ..
    </data>
    或者创建一个MSXML activeX对象动态装入xml文件。