另外发现有人说用树的方式会更灵活和方便,如图
花了半天时间实现一个多级联动下拉框,目的是对某一植物进行“门纲目科属”的归类。使用的技术是javascript+xml,之所以不用数据库,一来这
方面的数据虽然量大但都是固定不变的,二来不希望加重服务器的负担,第三是因为这种多级从属关系的数据不太适合放在数据库里。
这是大概的思路:
1、读取xml文件
2、当一个下拉框选中某选项时,根据该选项,当前节点指向下一层,进入下一层下拉框的设置
3、取消当前下拉框的禁用,禁用下一层的下拉框
4、清空当前下拉框的选项
5、根据当前节点读取xml的数据,设置下拉框选项
6、返回步骤2
代码:
JavaScript
-
var
xmlDoc;
-
var
browserType;
-
var
currentNode;
-
-
setBrowserType();
-
loadXml("classify.xml"
);
-
-
-
-
-
function
setPhylum(){
-
currentNode=xmlDoc.documentElement;
-
var
phylums=xmlDoc.documentElement.childNodes;
-
var
phylumName;
-
if
(browserType==
"IE"
){
-
for
(
var
i=0;i<phylums.length;i++){
-
-
phylumName=phylums[i].selectNodes("name"
)[0].text;
-
document.forms[0].phylum.options[i+1]=new
Option(phylumName,phylumName);
-
}
-
}
-
else
{
-
-
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;
-
-
-
-
-
if
(browserType==
"IE"
){
-
currentNode=xmlDoc.documentElement.childNodes(selectedIndex-1);
-
clazzes=currentNode.childNodes;
-
-
-
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
{
-
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;
-
-
var
phylumSI=document.forms[0].phylum.selectedIndex;
-
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"
;
-
-
-
var
phylumSI=document.forms[0].phylum.selectedIndex;
-
var
clazzSI=document.forms[0].clazz.selectedIndex;
-
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
;
-
-
-
var
phylumSI=document.forms[0].phylum.selectedIndex;
-
var
clazzSI=document.forms[0].clazz.selectedIndex;
-
var
orderSI=document.forms[0].order.selectedIndex;
-
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){
-
browserType="IE"
;
-
}else
{
-
browserType="FireFox"
;
-
}
-
}
-
-
-
function
loadXml(xmlName){
-
if
(browserType==
"IE"
){
-
xmlDoc = new
ActiveXObject(
"Microsoft.XMLDOM"
);
-
xmlDoc.async = false
;
-
xmlDoc.load(xmlName);
-
} else
{
-
-
-
-
browserType="FireFox"
;
-
var
xmlHttp =
new
XMLHttpRequest();
-
xmlHttp.open( "GET"
,
"classify.xml"
,
false
) ;
-
xmlHttp.send(null
) ;
-
xmlDoc=xmlHttp.responseXML;
-
-
-
-
-
}
-
}
最后是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]。
- 大小: 16.3 KB
分享到:
相关推荐
三级联动下拉框, 也可以扩展为N级联动, 自动判别 label, value, 速度快,项目中肯定用得到
jQuery 多级联动下拉框插件
javascript实现二级联动下拉框,多多支持:)
js2级省市联动下拉框js2级省市联动下拉框js2级省市联动下拉框js2级省市联动下拉框
javascript实现二级联动下拉框.docx
jquery实现的多级联动下拉框,由div标签加上span标签实现。
ajax 实现 (全国,省,是,区....) N级联 Demo js: <script type="text/javascript"> $(function () { $.fn.CascadeSelect({ url: '/CascadeSelect/CascadeSelect.ashx', //返回Json数据的一般处理文件 idKey: ...
用XML存储地区数据,页面上使用: var Array_AreaName = ["","",""]; /// 地区值设置初始值 并在body 的onload 事件里添加:Set_AreaSelected(); ;"> 所在省份 所在地市 市、县级市、县 可以在js里自定义...
NULL 博文链接:https://liangq.iteye.com/blog/1457926
asp二级联动下拉框,三级联动下拉框,asp二级联动下拉框,三级联动下拉框, 可能传错了 sorry
JavaScript 自定义多级联动下拉菜单
jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框
Ajax实现的三级联动下拉框
运用面向对象的思想,通过XML或其它方式,灵活的调整省份和城市的数据,以此实现联动下拉框的数据装配
JS下拉框多级联动--出生日期和世界各国
xml城市下拉框联动,xml城市下拉框联动,xml城市下拉框联动
该资源为已完成的拉框参数联动查询模板、饼图联动饼图模板,适配FR10.0版本、可直接下载学习使用。
基于jQuery Selector.js插件实现的联动下拉框表单美化效果源码.zip