用xml实现省份城市的级联(无刷新的)

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
</head>
<script type="text/javascript" >
<!--
var xmldom = new ActiveXObject("Microsoft.XMLDOM");
var arrProvince = [];//创建数组存放从city.xml读来的省份数据
var arrCitiy = [];//创建数组存放从city.xml读来的城市数据
function init()
{
    xmldom.async = true;

  //当状态发生变化的时候重新调用statInit方法;
    xmldom.onreadystatechange = statInit;
    window.setTimeout(function()
    {//加载city.xml
        xmldom.load("city.xml");
    }
    , 10);
}

function statInit()
{

//xmldom.readyState:

    if (xmldom.readyState == 4)
    {
        if (xmldom == null || xmldom.documentElement == null)
        {
            alert("XML文件不存在或没有菜单项");
            return ;
        }
        createProvince();
    }
}

function createProvince()
{
    var xmlprovinces = xmldom.getElementsByTagName("province");
//    delitem(document.all.province);//清除各个选项,防止在重新加载
//    delitem(document.all.city);这两句没必要,删除即可
    for (var i = 0; i < xmlprovinces.length; i++)
    {
          arrProvince[i] = xmlprovinces[i].getAttribute("name");
          arrCitiy[i] = xmlprovinces[i].getAttribute("cities");
          document.getElementById("province").options.add(window.Option(arrProvince[i], arrProvince[i]));
   //       document.all.province.add(window.Option(arrProvince[i], arrProvince[i]));//添加各个option选项
//          window.Option(province[i], province[i])创建option选项
    }
    provinceChange(0);
}

function provinceChange(index)
{
    var city = arrCitiy[index].split(" ");
    delitem(document.all.city); //清除上次的列表
    for (var i = 0; i < city.length; i++)
    {
//    alert(i);
      document.all.city.add(window.Option(city[i], city[i]));
    }
}

function delitem(options)
{
    optioncount = options.length;
    for (i = optioncount - 1; i >= 0; i--)
    {
        options.options[i] = null
    }
}
//-->
</script>

 

<body οnlοad="init()">
<select name="province" οnchange="provinceChange(this.selectedIndex)"></select>
<select name="city"></select>
</body>
</html>

转载于:https://www.cnblogs.com/wz327/archive/2010/05/10/1731961.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
最近的项目要用到全国市数据,于是到网上找了一些。可是下载下来看一下,格式都不是我想要的。基本上都是分表的,、市分开保存,有的还有地区表。而自己想要一个表的,或者是一个xml,或者是一个Json。 搜索过程中,找到了国家统计局的市数据,看页面简单,正好最近在弄数据采集。以其下载别人的,还要扣金币、不如自己采集吧,一方面练习,另一方面也上传供下载,赚些金币,嘿嘿。 好了,牢骚说完了,说正事。 数据来源与国家统计局网站,网址是:http://www.stats.gov.cn/tjbz/xzqhdm/t20090626_402568086.htm (这些数据还包含了行政区域代码,就是身份证号码前6位,可以用来查询身份证归属地^_^) 这个页面数据是有规律的,每个省份包含在 标签内,而城市和地区则用分隔 我是的采集正则表达式是:(|)(\d{6})(\s*)([^<]*) 这里有几个地方需要注意,其实是他们发布数据时的一点点不规则的地方: 1.宁夏回族自治区, 开始时多了个 。上面说了省份是包含在 标签内,所以这个情况如果想只找出省份的话,用 是匹配不到的 2.有些地方的空格是用  ,有的地方是全角空格,有的地方是用半角空格,如果有用到空格的地方就注意一下咯,我在保存 xml 和 Json 时,就用到了空格,所以我都做替换了 要注意的就这两点而已,好了,我会把这段文字和 xml、Json 一起打包上传。 压缩包里面是全部写好的,可以直接用。 评论返还全部分数哦。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值