利用js读出xml制作地区联动下拉框

 

< script language = " javascript " >
function  LoadXML()
{
     var  xmlDoc  =   new  ActiveXObject( " Microsoft.XMLDOM " ); 
    xmlDoc.async  =   true ;(此处要注意，我在asp.net中时，需要写成false才行，难道真TMD C#比较慢的原因？)
    xmlDoc.load( " XML\\Area.xml " );
     return  xmlDoc;
    
}

function  InitArea()
{
    
     /* 获取，引用三个下拉框  */
     var  dropElement1 = document.getElementById( " Select1 " ); 
     var  dropElement2 = document.getElementById( " Select2 " ); 
     var  dropElement3 = document.getElementById( " Select3 " ); 
     /* 自定义一个方法 把传进来的对象清除    这里清除了三个下拉所有框的选项 */   
    RemoveDropDownList(dropElement1);
    RemoveDropDownList(dropElement2);
    RemoveDropDownList(dropElement3);
    
     var  pOption  =  document.createElement( " option " );
    pOption.value  =   " 0 " ;
    pOption.text  =   " 全国 " ;
    dropElement1.add(pOption);
    
     var  cOption  =  document.createElement( " option " );
    cOption.value  =   " 0 " ;
    cOption.text  =   " 全部市 " ;
    dropElement2.add(cOption);
    
     var  aOption  =  document.createElement( " option " );
    aOption.value  =   " 0 " ;
    aOption.text  =   " 全区县 " ;
    dropElement3.add(aOption);
    
     var  xmlDoc =  LoadXML();
     // var provinceNodes = xmlDoc.documentElement.childNodes[1].getAttribute("name");
     /* 获取全市节点 */
     var  provinceNodes  =  xmlDoc.documentElement.childNodes;
     // var  TopnodeList=xmlDoc.selectSingleNode("Root").childNodes;
     // j = provinceNodes.length;
     // alert(j)
     if (provinceNodes.length  >   0 )  // provinceNodes.length = 31
    {
         var  province;
         var  city;
         var  area;
        
         for ( var  i = 0 ; i < provinceNodes.length; i ++ )
        {
            province  =  provinceNodes[i];
             var  pOption  =  document.createElement( " option " );
            pOption.value  =  province.getAttribute( " name " );
            pOption.text  =  province.getAttribute( " name " );
            dropElement1.add(pOption);
        }
    }
}

function  selectProvince()
{
     var  dropElement1 = document.getElementById( " Select1 " ); 
     var  provinceName = dropElement1.options[dropElement1.selectedIndex].text;
     var  xmlDoc =  LoadXML();
     var  provinceNode  =  xmlDoc.selectSingleNode( " //root/province[@name=' " + provinceName + " '] " );   // alert(provinceNode.getAttribute("name"));
    
     /* XmlNode node = doc.SelectSingleNode("//AllNode/Node[@ID = ’aaa’]");
   在整个Xml中查找AllNode节点下的节点名为Node的节点，该子节点的ID属性值为aaa */
   
     var  dropElement2 = document.getElementById( " Select2 " ); 
     var  dropElement3 = document.getElementById( " Select3 " );
    
    RemoveDropDownList(dropElement2);
    RemoveDropDownList(dropElement3);
    
     var  cOption  =  document.createElement( " option " );
    cOption.value  =   " 0 " ;
    cOption.text  =   " 全部市 " ;
    dropElement2.add(cOption);
    
     var  aOption  =  document.createElement( " option " );
    aOption.value  =   " 0 " ;
    aOption.text  =   " 全区县 " ;
    dropElement3.add(aOption);
    
     if  (provinceNode == null )
    {
         return ;
    }
     for ( var  i = 0 ; i < provinceNode.childNodes.length; i ++ )
        {
            city  =  provinceNode.childNodes[i];
             var  cOption  =  document.createElement( " option " );
            cOption.value  =  city.getAttribute( " name " );
            cOption.text  =  city.getAttribute( " name " );
            dropElement2.add(cOption);
        }


}

function  selectArea()
{
     var  dropElement2 = document.getElementById( " Select2 " ); 
     var  cityName = dropElement2.options[dropElement2.selectedIndex].text;
     var  xmlDoc =  LoadXML();
     var  cityNode  =  xmlDoc.selectSingleNode( " //root/province/city[@name=' " + cityName + " '] " );
    
     var  dropElement3 = document.getElementById( " Select3 " );
    RemoveDropDownList(dropElement3);
     var  aOption  =  document.createElement( " option " );
    aOption.value  =   " 0 " ;
    aOption.text  =   " 全区县 " ;
    dropElement3.add(aOption);
     if  (cityNode == null )
    {
         return ;
    }    
     for ( var  i = 0 ; i < cityNode.childNodes.length; i ++ )
        {
            city  =  cityNode.childNodes[i];
             var  aOption  =  document.createElement( " option " );
            aOption.value  =  city.getAttribute( " name " );
            aOption.text  =  city.getAttribute( " name " );
            dropElement3.add(aOption);
        }
}

function  RemoveDropDownList(obj)
{
     if (obj) // 如果参数obj不为空 则
    {
         var  length = obj.options.length;
         if (length  >   0 )
        {
             for ( var  i = length; i >= 0 ;i -- )
            {
                obj.remove(i);
            }
        }
    }
}
window.onload = InitArea;
< / script>

 

 

 

 

/Files/szyicol/searchArea.rar