利用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