js实现多级联动下拉框

时间 2021-08-15 标签浏览器 async ide this code orm xml 索引 get 同步

大概的思路：
一、读取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

效果图：orm