javascript实现下拉条联动_js实现多级联动下拉框

花了半天时间实现一个多级联动下拉框，目的是对某一植物进行“门纲目科属”的归类。使用的技术是javascript+xml，之所以不用数据库，一来这方面的数据虽然量大但都是固定不变的，二来不希望加重服务器的负担，第三是因为这种多级从属关系的数据不太适合放在数据库里。

这是大概的思路：

1、读取xml文件

2、当一个下拉框选中某选项时，根据该选项，当前节点指向下一层，进入下一层下拉框的设置

3、取消当前下拉框的禁用，禁用下一层的下拉框

4、清空当前下拉框的选项

5、根据当前节点读取xml的数据，设置下拉框选项

6、返回步骤2

代码：

JavaScript

Javascript代码

//载入xml文件

varxmlDoc=newActiveXObject("Microsoft.XMLDOM");

xmlDoc.async =false;

xmlDoc.load("classify.xml");

varcurrentNode;//当前所在节点

//读取xml文件数据并设置门、纲、目、科、属的下拉框

//设置“门”的下拉框

functionsetPhylum(){

currentNode=xmlDoc.documentElement;

varphylums = currentNode.childNodes;

for(vari=0;i

//从门到属，都有name属性标签，并且所有下拉框选项索引都是从1开始

varphylumName=phylums(i).selectNodes("name")(0).text;

document.forms[0].phylum.options[i+1]=newOption(phylumName,phylumName);

}

}

//设置“纲”的下拉框

functionsetClazz(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";

//将选中的门节点作为当前节点，注意这里需要将索引回减1

//因为门的父节点没有name属性标签，而下拉框的索引又是从1开始

//currentNode的赋值应使用绝对定位，也是因应各下拉框的无序选择

//currentNode=currentNode.childNodes(selectedIndex-1);

currentNode=xmlDoc.documentElement.childNodes(selectedIndex-1);

varclazzes=currentNode.childNodes;

clearOption(document.forms[0].clazz);

//因为门节点的第一个子节点为name属性标签，故循环时索引从1开始

//相应的下拉框的索引就与纲节点的索引同步(不需要options[i+1])，目、科、属也是一样

for(vari=1;i

varclazzName=clazzes(i).selectNodes("name")(0).text;

document.forms[0].clazz.options[i]=ne