花了半天时间实现一个多级联动下拉框，目的是对某一植物进行“门纲目科属”的归类。使用的技术是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]=newOption(clazzName,clazzName);

}

}

//设置“目”的下拉框

functionsetOrder(selectedIndex){

//取消下拉框的禁用

//后面的下拉框禁用，这是因应各下拉框的无序选择可能产生的错误(比如选了“科”又回头重新选“目”)

document.forms[0].order.disabled=null;

document.forms[0].family.disabled="disabled";

document.forms[0].genus.disabled="disabled";

//currentNode的赋值应使用绝对定位

varphylumSI=document.forms[0].phylum.selectedIndex;//phylum selected index

currentNode=xmlDoc.documentElement

.childNodes(phylumSI-1)

.childNodes(selectedIndex);

varorders=currentNode.childNodes;

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

for(vari=1;i

varorderName=orders(i).selectNodes("name")(0).text;

document.forms[0].order.options[i]=newOption(orderName,orderName);

}

}

//设置“科”的下拉框

functionsetFamily(selectedIndex){

document.forms[0].family.disabled=null;//取消下拉框的禁用

document.forms[0].genus.disabled="disabled";//后面的下拉框禁用

//currentNode的赋值应使用绝对定位

varphylumSI=document.forms[0].phylum.selectedIndex;//phylum selected index

varclazzSI=document.forms[0].clazz.selectedIndex;//clazz selected index

currentNode=xmlDoc.documentElement

.childNodes(phylumSI-1)

.childNodes(clazzSI)

.childNodes(selectedIndex);

varfamilies=currentNode.childNodes;

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

for(vari=1;i

varfamilyName=families(i).selectNodes("name")(0).text;

document.forms[0].family.options[i]=newOption(familyName,familyName);

}

}

//设置“属”的下拉框

functionsetGenus(selectedIndex){

document.forms[0].genus.disabled=null;//取消下拉框的禁用

//currentNode的赋值应使用绝对定位

varphylumSI=document.forms[0].phylum.selectedIndex;//phylum selected index

varclazzSI=document.forms[0].clazz.selectedIndex;//clazz selected index

varorderSI=document.forms[0].order.selectedIndex;//order selected index

currentNode=xmlDoc.documentElement

.childNodes(phylumSI-1)

.childNodes(clazzSI)

.childNodes(orderSI)

.childNodes(selectedIndex);

vargenuses=currentNode.childNodes;

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

for(vari=1;i

//属为叶节点

vargenusName=genuses(i).text;

document.forms[0].genus.options[i]=newOption(genusName,genusName);

}

}

//清空下拉框选项

functionclearOption(selectElement){

for(vari=1;i

selectElement.options[i]=null;

}

}

//载入xml文件

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async = false;

xmlDoc.load("classify.xml");

var currentNode;//当前所在节点

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

//设置“门”的下拉框

function setPhylum(){

currentNode=xmlDoc.documentElement;

var phylums = currentNode.childNodes;

for(var i=0;i

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

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

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

}

}

//设置“纲”的下拉框

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

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

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

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

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

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

var clazzes=currentNode.childNodes;

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

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

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

for(var i=1;i

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

document.forms[0].clazz.options[i]=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";

//currentNode的赋值应使用绝对定位

var phylumSI=document.forms[0].phylum.selectedIndex;//phylum selected index

currentNode=xmlDoc.documentElement

.childNodes(phylumSI-1)

.childNodes(selectedIndex);

var orders=currentNode.childNodes;

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

for(var i=1;i

var orderName=orders(i).selectNodes("name")(0).text;

document.forms[0].order.options[i]=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

currentNode=xmlDoc.documentElement

.childNodes(phylumSI-1)

.childNodes(clazzSI)

.childNodes(selectedIndex);

var families=currentNode.childNodes;

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

for(var i=1;i

var familyName=families(i).selectNodes("name")(0).text;

document.forms[0].family.options[i]=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

currentNode=xmlDoc.documentElement

.childNodes(phylumSI-1)

.childNodes(clazzSI)

.childNodes(orderSI)

.childNodes(selectedIndex);

var genuses=currentNode.childNodes;

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

for(var i=1;i

//属为叶节点

var genusName=genuses(i).text;

document.forms[0].genus.options[i]=new Option(genusName,genusName);

}

}

//清空下拉框选项

function clearOption(selectElement){

for(var i=1;i

selectElement.options[i]=null;

}

}

html

Html代码

οnchange="setClazz(this.selectedIndex)">

———门———

οnchange="setOrder(this.selectedIndex)">

———纲———

οnchange="setFamily(this.selectedIndex)">

———目———

οnchange="setGenus(this.selectedIndex)">

———科———

———属———

setPhylum();//设置第一个下拉框

οnchange="setClazz(this.selectedIndex)">

———门———

οnchange="setOrder(this.selectedIndex)">

———纲———

οnchange="setFamily(this.selectedIndex)">

———目———

οnchange="setGenus(this.selectedIndex)">

———科———

———属———

setPhylum();//设置第一个下拉框

最后是xml文件的内容

Xml代码

被子植物门

双子叶植物纲

菊目

菊科

菊属

桔梗科

同钟花属

刺萼参属

胡椒目

胡椒科

胡椒属

草胡椒属

齐头绒属

蕨类植物门

石松纲

石松目

石松科

石松属

被子植物门

双子叶植物纲

菊目

菊科

菊属

桔梗科

同钟花属

刺萼参属

胡椒目

胡椒科

胡椒属

草胡椒属

齐头绒属

蕨类植物门

石松纲

石松目

石松科

石松属

可以实现上下级下拉框的联动，支持无序选择，若向上重新选择，下下层下拉框将自动被禁用，下层下拉框选项也会相应改变。

有一点不足是，因为数据量实在太大，这样5个下拉框仍然可能出现某下拉框有几百甚至几千个选项，此时就失去了下拉框的意义，因此正在考虑是否应该做成输入框的形式，或者像搜索引擎那样带有输入提示功能，研究中，欢迎拍砖。