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

  • 相关阅读:
    jq的stop
    mouseover,mouseout与mouseenter,mouseleave
    jq的load
    KeyUp 和KeyDown 、KeyPress之间的区别
    jq的error
    $(function() {....}) ,(function($){...})(jQuery)
    delegate事件委托
    将项目提交到git
    linux下安装jenkins
    手写简单的linkedlist
  • 原文地址:https://www.cnblogs.com/szyicol/p/1811883.html
Copyright © 2020-2023  润新知