js實現多級聯動下拉框

時間 2021-08-15

標籤瀏覽器 async ide this code orm xml 索引 get 同步欄目 JavaScript 简体版

原文原文鏈接

大概的思路：
一、讀取xml文件
二、當一個下拉框選中某選項時，根據該選項，當前節點指向下一層，進入下一層下拉框的設置
三、取消當前下拉框的禁用，禁用下一層的下拉框
四、清空當前下拉框的選項
五、根據當前節點讀取xml的數據，設置下拉框選項
六、返回步驟2
瀏覽器

JS代碼：async

var xmlDoc;
var browserType;
var currentNode;//當前所在節點

setBrowserType();
loadXml("classify.xml");

//讀取xml文件數據並設置門、綱、目、科、屬的下拉框

//設置「門」的下拉框
function setPhylum(){
    currentNode=xmlDoc.documentElement;
    var phylums=xmlDoc.documentElement.childNodes;
    var phylumName;
    if(browserType=="IE"){
        for(var i=0;i<phylums.length;i++){
            //從門到屬，都有name屬性標籤，而且全部下拉框選項索引都是從1開始
            phylumName=phylums[i].selectNodes("name")[0].text;
            document.forms[0].phylum.options[i+1]=new Option(phylumName,phylumName);
        }
    }
    else{//FF
        //FireFox沒有selectNodes()方法，且其childNodes的對應索引是1,3,5,7...
        for(var i=1;i<phylums.length;i=i+2){
            phylumName=phylums[i].childNodes[1].textContent;
            document.forms[0].phylum.options[(i+1)/2]=new Option(phylumName,phylumName);
        }
        document.forms[0].clazz.disabled="disabled";
        document.forms[0].order.disabled="disabled";
        document.forms[0].family.disabled="disabled";
        document.forms[0].genus.disabled="disabled";
    }
}

//設置「綱」的下拉框
function setClazz(selectedIndex){
    //取消下拉框的禁用
    //後面的下拉框禁用，這是因應各下拉框的無序選擇可能產生的錯誤
    //好比選了「科」又回頭從新選「目」，或更改同一個下拉框選項)
    document.forms[0].clazz.disabled=null;
    document.forms[0].order.disabled="disabled";
    document.forms[0].family.disabled="disabled";
    document.forms[0].genus.disabled="disabled";

    clearOption(document.forms[0].clazz);
    var clazzes;
    var clazzName;
    //將選中的門節點做爲當前節點，注意這裏須要將索引回減1
    //由於門的父節點沒有name屬性標籤，而下拉框的索引又是從1開始
    //currentNode的賦值應使用絕對定位，也是因應各下拉框的無序選擇
    //currentNode=currentNode.childNodes(selectedIndex-1);
    if(browserType=="IE"){
        currentNode=xmlDoc.documentElement.childNodes(selectedIndex-1);
        clazzes=currentNode.childNodes;
        //由於門節點的第一個子節點爲name屬性標籤，故循環時索引從1開始
        //相應的下拉框的索引就與綱節點的索引同步(不須要options[i+1])，目、科、屬也是同樣
        for(var i=1;i<clazzes.length;i++){
            clazzName=clazzes[i].selectNodes("name")[0].text;
            document.forms[0].clazz.options[i]=new Option(clazzName,clazzName);
        }
    }
    else{//FF
        currentNode=xmlDoc.documentElement.childNodes[selectedIndex*2-1];
        clazzes=currentNode.childNodes;
        for(var i=1;i<clazzes.length-2;i=i+2){
            clazzName=clazzes[i+2].childNodes[1].textContent;
            document.forms[0].clazz.options[(i+1)/2]=new Option(clazzName,clazzName);
        }
    }


}

//設置「目」的下拉框
function setOrder(selectedIndex){
    //取消下拉框的禁用
    //後面的下拉框禁用，這是因應各下拉框的無序選擇可能產生的錯誤(好比選了「科」又回頭從新選「目」)
    document.forms[0].order.disabled=null;
    document.forms[0].family.disabled="disabled";
    document.forms[0].genus.disabled="disabled";

    clearOption(document.forms[0].order);
    var orderName;
    //currentNode的賦值應使用絕對定位
    var phylumSI=document.forms[0].phylum.selectedIndex;    //phylum selected index
    if(browserType=="IE"){
        currentNode=xmlDoc.documentElement
            .childNodes[phylumSI-1]
            .childNodes[selectedIndex];
        var orders=currentNode.childNodes;
        for(var i=1;i<orders.length;i++){
            orderName=orders[i].selectNodes("name")[0].text;
            document.forms[0].order.options[i]=new Option(orderName,orderName);
        }
    }else{
        currentNode=xmlDoc.documentElement
            .childNodes[phylumSI*2-1]
            .childNodes[selectedIndex*2+1];
        var orders=currentNode.childNodes;
        for(var i=1;i<orders.length-2;i=i+2){
            orderName=orders[i+2].childNodes[1].textContent;
            document.forms[0].order.options[(i+1)/2]=new Option(orderName,orderName);
        }
    }
}

//設置「科」的下拉框
function setFamily(selectedIndex){
    document.forms[0].family.disabled=null;//取消下拉框的禁用
    document.forms[0].genus.disabled="disabled";//後面的下拉框禁用

    //currentNode的賦值應使用絕對定位
    var phylumSI=document.forms[0].phylum.selectedIndex;//phylum selected index
    var clazzSI=document.forms[0].clazz.selectedIndex;  //clazz selected index
    clearOption(document.forms[0].family);
    var families;
    var familyName;
    if(browserType=="IE"){
        currentNode=xmlDoc.documentElement
            .childNodes[phylumSI-1]
            .childNodes[clazzSI]
            .childNodes[selectedIndex];
        families=currentNode.childNodes;
        for(var i=1;i<families.length;i++){
            familyName=families[i].selectNodes("name")[0].text;
            document.forms[0].family.options[i]=new Option(familyName,familyName);
        }
    }
    else{
        currentNode=xmlDoc.documentElement
            .childNodes[phylumSI*2-1]
            .childNodes[clazzSI*2+1]
            .childNodes[selectedIndex*2+1];
        families=currentNode.childNodes;
        for(var i=1;i<families.length-2;i=i+2){
            familyName=families[i+2].childNodes[1].textContent;
            document.forms[0].family.options[(i+1)/2]=new Option(familyName,familyName);
        }
    }
}

//設置「屬」的下拉框
function setGenus(selectedIndex){
    document.forms[0].genus.disabled=null;//取消下拉框的禁用

    //currentNode的賦值應使用絕對定位
    var phylumSI=document.forms[0].phylum.selectedIndex;//phylum selected index
    var clazzSI=document.forms[0].clazz.selectedIndex;  //clazz selected index
    var orderSI=document.forms[0].order.selectedIndex;  //order selected index
    clearOption(document.forms[0].genus);
    var genues;
    var genusName;

    if(browserType=="IE"){

        currentNode=xmlDoc.documentElement
            .childNodes(phylumSI-1)
            .childNodes(clazzSI)
            .childNodes(orderSI)
            .childNodes(selectedIndex);
        genuses=currentNode.childNodes;
        for(var i=1;i<genuses.length;i++){
            //屬爲葉節點
            var genusName=genuses[i].text;
            document.forms[0].genus.options[i]=new Option(genusName,genusName);
        }
    }
    else{
        currentNode=xmlDoc.documentElement
            .childNodes[phylumSI*2-1]
            .childNodes[clazzSI*2+1]
            .childNodes[orderSI*2+1]
            .childNodes[selectedIndex*2+1];
        genuses=currentNode.childNodes;
        for(var i=1;i<genuses.length-2;i=i+2){
            //屬爲葉節點
            var genusName=genuses[i+2].textContent;
            document.forms[0].genus.options[(i+1)/2]=new Option(genusName,genusName);
        }
    }
}

//清空下拉框選項
function clearOption(selectElement){
    for(var i=1;i<selectElement.options.length;i++){
        selectElement.options[i]=null;
    }
}

//判斷瀏覽器類型
function setBrowserType(){
    if (window.ActiveXObject){//IE
        browserType="IE";
    }else{
        browserType="FireFox";
    }
}

//載入xml
function loadXml(xmlName){
    if (browserType=="IE"){//IE
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        xmlDoc.load(xmlName);
    } else{
//      xmlDoc=document.implementation.createDocument("", "", null);
//      xmlDoc.async = false;
//      xmlDoc.load("classify.xml");
        browserType="FireFox";
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open( "GET", "classify.xml", false ) ;
        xmlHttp.send(null) ;
        xmlDoc=xmlHttp.responseXML;

        //FireFox沒有selectNodes()方法，且xml中，其childNodes的對應索引是1,3,5,7...
//      alert(xmlDoc.getElementsByTagName("phylum")[1]
//          .childNodes[3].childNodes[3].childNodes[1].textContent);
    }
}
ide

var xmlDoc;  
var browserType;
var currentNode;//當前所在節點

setBrowserType();
loadXml("classify.xml");

//讀取xml文件數據並設置門、綱、目、科、屬的下拉框

//設置「門」的下拉框
function setPhylum(){
	currentNode=xmlDoc.documentElement;
	var phylums=xmlDoc.documentElement.childNodes;
	var phylumName;
	if(browserType=="IE"){
		for(var i=0;i<phylums.length;i++){
			//從門到屬，都有name屬性標籤，而且全部下拉框選項索引都是從1開始
			phylumName=phylums[i].selectNodes("name")[0].text;
			document.forms[0].phylum.options[i+1]=new Option(phylumName,phylumName);
		}
	}
	else{//FF
		//FireFox沒有selectNodes()方法，且其childNodes的對應索引是1,3,5,7...
		for(var i=1;i<phylums.length;i=i+2){
			phylumName=phylums[i].childNodes[1].textContent;
			document.forms[0].phylum.options[(i+1)/2]=new Option(phylumName,phylumName);
		}
		document.forms[0].clazz.disabled="disabled";
		document.forms[0].order.disabled="disabled";
		document.forms[0].family.disabled="disabled";
		document.forms[0].genus.disabled="disabled";
	}
}

//設置「綱」的下拉框
function setClazz(selectedIndex){
	//取消下拉框的禁用
	//後面的下拉框禁用，這是因應各下拉框的無序選擇可能產生的錯誤
	//好比選了「科」又回頭從新選「目」，或更改同一個下拉框選項)
	document.forms[0].clazz.disabled=null;
	document.forms[0].order.disabled="disabled";
	document.forms[0].family.disabled="disabled";
	document.forms[0].genus.disabled="disabled";
	
	clearOption(document.forms[0].clazz);
	var clazzes;
	var clazzName;
	//將選中的門節點做爲當前節點，注意這裏須要將索引回減1
	//由於門的父節點沒有name屬性標籤，而下拉框的索引又是從1開始
	//currentNode的賦值應使用絕對定位，也是因應各下拉框的無序選擇
	//currentNode=currentNode.childNodes(selectedIndex-1);
	if(browserType=="IE"){
		currentNode=xmlDoc.documentElement.childNodes(selectedIndex-1);
		clazzes=currentNode.childNodes;
		//由於門節點的第一個子節點爲name屬性標籤，故循環時索引從1開始
		//相應的下拉框的索引就與綱節點的索引同步(不須要options[i+1])，目、科、屬也是同樣
		for(var i=1;i<clazzes.length;i++){
			clazzName=clazzes[i].selectNodes("name")[0].text;
			document.forms[0].clazz.options[i]=new Option(clazzName,clazzName);
		}
	}
	else{//FF
		currentNode=xmlDoc.documentElement.childNodes[selectedIndex*2-1];
		clazzes=currentNode.childNodes;
		for(var i=1;i<clazzes.length-2;i=i+2){
			clazzName=clazzes[i+2].childNodes[1].textContent;
			document.forms[0].clazz.options[(i+1)/2]=new Option(clazzName,clazzName);
		}
	}
	
	
}

//設置「目」的下拉框
function setOrder(selectedIndex){
	//取消下拉框的禁用
	//後面的下拉框禁用，這是因應各下拉框的無序選擇可能產生的錯誤(好比選了「科」又回頭從新選「目」)
	document.forms[0].order.disabled=null;
	document.forms[0].family.disabled="disabled";
	document.forms[0].genus.disabled="disabled";
	
	clearOption(document.forms[0].order);
	var orderName;
	//currentNode的賦值應使用絕對定位
	var phylumSI=document.forms[0].phylum.selectedIndex;	//phylum selected index
	if(browserType=="IE"){
		currentNode=xmlDoc.documentElement
			.childNodes[phylumSI-1]
			.childNodes[selectedIndex];
		var orders=currentNode.childNodes;
		for(var i=1;i<orders.length;i++){
			orderName=orders[i].selectNodes("name")[0].text;
			document.forms[0].order.options[i]=new Option(orderName,orderName);
		}
	}else{
		currentNode=xmlDoc.documentElement
			.childNodes[phylumSI*2-1]
			.childNodes[selectedIndex*2+1];
		var orders=currentNode.childNodes;
		for(var i=1;i<orders.length-2;i=i+2){
			orderName=orders[i+2].childNodes[1].textContent;
			document.forms[0].order.options[(i+1)/2]=new Option(orderName,orderName);
		}
	}
}

//設置「科」的下拉框
function setFamily(selectedIndex){
	document.forms[0].family.disabled=null;//取消下拉框的禁用
	document.forms[0].genus.disabled="disabled";//後面的下拉框禁用
	
	//currentNode的賦值應使用絕對定位
	var phylumSI=document.forms[0].phylum.selectedIndex;//phylum selected index
	var clazzSI=document.forms[0].clazz.selectedIndex;	//clazz selected index
	clearOption(document.forms[0].family);
	var families;
	var familyName;
	if(browserType=="IE"){
		currentNode=xmlDoc.documentElement
			.childNodes[phylumSI-1]
			.childNodes[clazzSI]
			.childNodes[selectedIndex];
		families=currentNode.childNodes;
		for(var i=1;i<families.length;i++){
			familyName=families[i].selectNodes("name")[0].text;
			document.forms[0].family.options[i]=new Option(familyName,familyName);
		}
	}
	else{
		currentNode=xmlDoc.documentElement
			.childNodes[phylumSI*2-1]
			.childNodes[clazzSI*2+1]
			.childNodes[selectedIndex*2+1];
		families=currentNode.childNodes;
		for(var i=1;i<families.length-2;i=i+2){
			familyName=families[i+2].childNodes[1].textContent;
			document.forms[0].family.options[(i+1)/2]=new Option(familyName,familyName);
		}
	}
}

//設置「屬」的下拉框
function setGenus(selectedIndex){
	document.forms[0].genus.disabled=null;//取消下拉框的禁用
	
	//currentNode的賦值應使用絕對定位
	var phylumSI=document.forms[0].phylum.selectedIndex;//phylum selected index
	var clazzSI=document.forms[0].clazz.selectedIndex;	//clazz selected index
	var orderSI=document.forms[0].order.selectedIndex;	//order selected index
	clearOption(document.forms[0].genus);
	var genues;
	var genusName;
	
	if(browserType=="IE"){
		
		currentNode=xmlDoc.documentElement
			.childNodes(phylumSI-1)
			.childNodes(clazzSI)
			.childNodes(orderSI)
			.childNodes(selectedIndex);
		genuses=currentNode.childNodes;
		for(var i=1;i<genuses.length;i++){
			//屬爲葉節點
			var genusName=genuses[i].text;
			document.forms[0].genus.options[i]=new Option(genusName,genusName);
		}
	}
	else{
		currentNode=xmlDoc.documentElement
			.childNodes[phylumSI*2-1]
			.childNodes[clazzSI*2+1]
			.childNodes[orderSI*2+1]
			.childNodes[selectedIndex*2+1];
		genuses=currentNode.childNodes;
		for(var i=1;i<genuses.length-2;i=i+2){
			//屬爲葉節點
			var genusName=genuses[i+2].textContent;
			document.forms[0].genus.options[(i+1)/2]=new Option(genusName,genusName);
		}
	}
}

//清空下拉框選項
function clearOption(selectElement){
	for(var i=1;i<selectElement.options.length;i++){
		selectElement.options[i]=null;
	}
}

//判斷瀏覽器類型
function setBrowserType(){
	if (window.ActiveXObject){//IE
		browserType="IE";
	}else{
		browserType="FireFox";
	}
}

//載入xml
function loadXml(xmlName){
	if (browserType=="IE"){//IE
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
		xmlDoc.async = false;
		xmlDoc.load(xmlName);
	} else{
//		xmlDoc=document.implementation.createDocument("", "", null);
//		xmlDoc.async = false;
//		xmlDoc.load("classify.xml");
		browserType="FireFox";
		var xmlHttp = new XMLHttpRequest();
	    xmlHttp.open( "GET", "classify.xml", false ) ;
	    xmlHttp.send(null) ;
	    xmlDoc=xmlHttp.responseXML;
	    
	    //FireFox沒有selectNodes()方法，且xml中，其childNodes的對應索引是1,3,5,7...
//	    alert(xmlDoc.getElementsByTagName("phylum")[1]
//	        .childNodes[3].childNodes[3].childNodes[1].textContent);
	}
}

XML代碼：this

<?xml version="1.0" encoding="UTF-8"?>
<plant>
    <phylum>
        <name>被子植物門</name>
        <clazz>
            <name>雙子葉植物綱</name>
            <order>
                <name>菊目</name>
                <family>
                    <name>菊科</name>
                    <genus>菊屬</genus>
                </family>
                <family>
                    <name>桔梗科</name>
                    <genus>同鍾花屬</genus>
                    <genus>刺萼參屬</genus>
                </family>
            </order>
            <order>
                <name>胡椒目</name>
                <family>
                    <name>胡椒科</name>
                    <genus>胡椒屬</genus>
                    <genus>草胡椒屬</genus>
                    <genus>齊頭絨屬</genus>
                </family>
            </order>
        </clazz>
    </phylum>
    <phylum>
        <name>蕨類植物門</name>
        <clazz>
            <name>石松綱</name>
            <order>
                <name>石松目</name>
                <family>
                    <name>石松科</name>
                    <genus>石松屬</genus>
                </family>
            </order>
        </clazz>
    </phylum>
</plant>
code