花了半天时间实现一个多级联动下拉框,目的是对某一植物进行“门纲目科属”的归类。使用的技术是javascript+xml,之所以不用数据库,一来这方面的数据虽然量大但都是固定不变的,二来不希望加重服务器的负担,第三是因为这种多级从属关系的数据不太适合放在数据库里。
这是大概的思路:
1、读取xml文件
2、当一个下拉框选中某选项时,根据该选项,当前节点指向下一层,进入下一层下拉框的设置
3、取消当前下拉框的禁用,禁用下一层的下拉框
4、清空当前下拉框的选项
5、根据当前节点读取xml的数据,设置下拉框选项
6、返回步骤2
代码:
JavaScript
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文件的内容
<?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>
这是部分效果图:
可以实现上下级下拉框的联动,支持无序选择,若向上重新选择,下下层下拉框将自动被禁用,下层下拉框选项也会相应改变。
有一点不足是,因为数据量实在太大,这样5个下拉框仍然可能出现某下拉框有几百甚至几千个选项,此时就失去了下拉框的意义,因此正在考虑是否应该做成输入框的形式,或者像搜索引擎那样带有输入提示功能,研究中,欢迎拍砖。
PS:重新修改了一下,可以支持FireFox了,这可真是麻烦的工程:FireFox的JavaScript的Element对象中没有selectNodes()方法,只有调用childNodes()或者getElementsByTagName();并且在FireFox中,xml中节点对应childNodes()的索引是1,3,5,7...,也就是说,如果你想读取xml某个节点下的第i个子节点,正常我们就会写someNode.childNodes[i-1],但在FireFox就必须写作someNode.childNodes[i*2-1]。
另外在使用数组时,IE允许把小括号当成中括号使用(即someArray[i]和someArray(i)均合法),FireFox则不行,所以最好统一写someArray[i]。
- 大小: 9.8 KB
- 大小: 9.3 KB
- 大小: 7.6 KB
- 大小: 6.7 KB
- 大小: 9.8 KB
分享到:
相关推荐
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手
《冯唐成事心法》学习笔记01:逆境来,了怎么办?
c语言课程设计-职工资源管理系统.7z
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看REAdMe.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看REAdMe.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看READme.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。
1、开发环境:ssm框架;内含Mysql数据库;JSP技术 2、需要项目部署的可以私信 3、项目代码都经过严格调试,代码没有任何bug! 4、该资源包括项目的全部源码,下载可以直接使用! 5、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 6、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 、 1资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看READmE.文件(md如有),本项目仅用作交流学习参考,请切勿用于商业用途。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手
Linux_运维脚本、GUI安装以及学习文档_ansible-linux
Go语言介绍(十五)--Go 语言range
Palo Alto Networks PA-220 管理员指导手册
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通;、本 3项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看ReadmE.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 、资 1源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看READMe.m文件(如d有),本项目仅用作交流学习参考,请切勿用于商业用途。
三菱PLC 结构化编程Q系列整条生产线大型项目 两台Q PLC 6台触摸屏 以太网通讯 机器人控制 mes ccd RS232串口通讯 大量fb,fc通用模块 三菱plc大项目程序高级编程 三菱PLC结构化编程一整条生产线程序全套资料 2台Q系列CPU 6台触摸屏 CC-LINK IO 串口通信 扫码枪 8台机器人 拧紧抢系统 CCD 上位机 mes过站管控 三菱gx works2结构化模块化编程,一条产线程序,大型架构,有非常大的参考意义,如果你能学会,势必升级 整条生产线程序包括,15个工位,流水线贯穿 两台三菱Q PLC,以太网通信 CCLINK远程IO站 6台触摸屏主从通信 主站触摸屏用宏指令设计型号管理:修改工艺参数、修改型号名称,并自动同步到从站触摸屏,由主站触摸屏统一换型 触摸屏界面设计优良 项目程序包含大量可重复使用的FB模块: 功能块FB封装有: 系统管理FB 气缸FB(单控双控通用) 机器人控制FB, 串口通信FB, 节拿FB, 产量统计FB, IO监视FB 线体挡停气缸FB(内含数据信息传递) 打螺丝控制FB 产品到达工位顶升控制FB 串口数据整合FC(ST
微软演示材料
【r语言数据分析案例】 R语言数据分析与挖掘,附数据及代码
1、开发环境:ssm框架;内含Mysql数据库;VUE技术 2、需要项目部署的可以私信 3、项目代码都经过严格调试,代码没有任何bug! 4、该资源包括项目的全部源码,下载可以直接使用! 5、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 6、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
微软演示材料
1、开发环境:ssm框架;内含Mysql数据库;VUE技术 2、需要项目部署的可以私信 3、项目代码都经过严格调试,代码没有任何bug! 4、该资源包括项目的全部源码,下载可以直接使用! 5、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 6、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。