龙的传人——xml_javascript三级联动

现在在网上看到的三级联一般都是连接数据库或，用javascript数组做的三级联动，我觉得数据没这个必要，有点杀鸡有牛刀的感觉，修改不方便。javascript数组对一般初学者来说不是那么容易看得懂，而且修改不方便，xml是一个不错的选择一目睹了然，随便增加删除十分方便！
ProvinceCity.xml
<?xml version="1.0" encoding="utf-8"?>
<Root> 
  <Province Name="北京市" Id="110000">
    <City Name="市辖区" Id="110100">
      <Area Name="东城区" Id="110101" />
      <Area Name="西城区" Id="110102" />
      <Area Name="崇文区" Id="110103" />
      <Area Name="宣武区" Id="110104" />
      <Area Name="朝阳区" Id="110105" />
      <Area Name="丰台区" Id="110106" />
      <Area Name="石景山区" Id="110107" />
      <Area Name="海淀区" Id="110108" />
      <Area Name="门头沟区" Id="110109" />
      <Area Name="房山区" Id="110111" />
      <Area Name="通州区" Id="110112" />
      <Area Name="顺义区" Id="110113" />
      <Area Name="昌平区" Id="110114" />
      <Area Name="大兴区" Id="110115" />
      <Area Name="怀柔区" Id="110116" />
      <Area Name="平谷区" Id="110117" />
    </City>
    <City Name="县" Id="110200">
      <Area Name="密云县" Id="110228" />
      <Area Name="延庆县" Id="110229" />
    </City>
  </Province>
  <Province Name="天津市" Id="120000">
    <City Name="市辖区" Id="120100">
      <Area Name="和平区" Id="120101" />
      <Area Name="河东区" Id="120102" />
      <Area Name="河西区" Id="120103" />
      <Area Name="南开区" Id="120104" />
      <Area Name="河北区" Id="120105" />
      <Area Name="红桥区" Id="120106" />
      <Area Name="塘沽区" Id="120107" />
      <Area Name="汉沽区" Id="120108" />
      <Area Name="大港区" Id="120109" />
      <Area Name="东丽区" Id="120110" />
      <Area Name="西青区" Id="120111" />
      <Area Name="津南区" Id="120112" />
      <Area Name="北辰区" Id="120113" />
      <Area Name="武清区" Id="120114" />
      <Area Name="宝坻区" Id="120115" />
    </City>
    <City Name="县" Id="120200">
      <Area Name="宁河县" Id="120221" />
      <Area Name="静海县" Id="120223" />
      <Area Name="蓟　县" Id="120225" />
    </City>
..........
........
........
</Province>
<Root> 
<script language="javascript" type="text/javascript">
var xmlDoc;
var nodeIndex;
function getxmlDoc()
{
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    var currNode;
    xmlDoc.async=false;
    xmlDoc.load("ProvinceCity.xml");
    if(xmlDoc.parseError.errorCode!=0)
    {
        var myErr=xmlDoc.parseError;
        alert("出错！"+myErr.reason);
    }   
    getProvince1();
}
function getProvince1()
{
    var nodeList=xmlDoc.selectSingleNode("Root").childNodes;
    var dropElement=document.getElementById("Select1");    
    for(var i=0; i<nodeList.length; i++)
    {
        var provinceNode=nodeList[i]; 
        var eOption=document.createElement("option");
        eOption.value=provinceNode.getAttribute("Id");
        eOption.text=provinceNode.getAttribute("Name");
        dropElement.add(eOption);     
    }
}
function selectCity1()
{
    var dropElement=document.getElementById("Select1");
    var id=dropElement.options[dropElement.selectedIndex].value;
    var provinceNode=xmlDoc.selectSingleNode("//Root/Province[@Id="+id+"]");
    var city=document.getElementById("Select2"); 
    var area=document.getElementById("Select3"); 
    RemoveDropDownList(city);
    RemoveDropDownList(area);
    for(var i=0; i<provinceNode.childNodes.length; i++)
    {
        var cityNode=provinceNode.childNodes[i];
        var eOption=document.createElement("option");
        eOption.value=cityNode.getAttribute("Id");
        eOption.text=cityNode.getAttribute("Name");
        city.add(eOption);
    }
}
function selectArea1()
{
    var dropElement=document.getElementById("Select2");
    var id=dropElement.options[dropElement.selectedIndex].value;
    var provinceNode=xmlDoc.selectSingleNode("//Root/Province/City[@Id="+id+"]");
    var area=document.getElementById("Select3"); 
    RemoveDropDownList(area);
    for(var i=0; i<provinceNode.childNodes.length; i++)
    {
        var cityNode=provinceNode.childNodes[i];
        var eOption=document.createElement("option");
        eOption.value=cityNode.getAttribute("Id");
        eOption.text=cityNode.getAttribute("Name");
        area.add(eOption);
    }
}
function RemoveDropDownList(obj)
{
    var len=obj.options.length;
    //alert(len);
    for(var i=len;i>=0;i--)
    {
        obj.remove(i);
    }
   
}
</script>
演示：http://home.goofar.com/lkc311/XmlDropDownlist.htm