28,391
社区成员
发帖
与我相关
我的任务
分享
多级联动下拉选择框,动态获取下一级,每一级数据为XML,可支持无限级(浏览器端需要Microsoft.XMLDOM支持)</p>
<select name="MaterialClass1" ChildSelectName="MaterialClass2"></select>
<select name="MaterialClass2" ChildSelectName="MaterialClass3"></select>
<select name="MaterialClass3"></select>
<select name="MaterialClass1" onchange="scs(this.value,'MaterialClass2')" ChildSelectName="MaterialClass2" val="02"></select>
<select name="MaterialClass2" onchange="scs(this.value,'MaterialClass3')" ChildSelectName="MaterialClass3" val="31"></select>
<select name="MaterialClass3" val="33"></select>
<script type="text/javascript">
var loadXML = function(xmlFile) {
var xmlDoc;
if(window.ActiveXObject){
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}else if (document.implementation&&document.implementation.createDocument){
xmlDoc = document.implementation.createDocument('', '', null);
xmlDoc.load(xmlFile);
}else {
alert('您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!');
return null;
}
return xmlDoc;
};
var xmlDoc = loadXML('xml.xml');
var arr=xmlDoc.getElementsByTagName("MaterialClasses")[0].childNodes;
function scs(pid,name,val){
var obj=document.getElementsByName(name)[0];
if(obj==null)return false;
obj.innerHTML="";
var id=null,n= 0,val=obj.getAttribute("val");
for(var i=0;i<arr.length;i++){
if(arr[i].getAttribute("pid")==pid){
var v=arr[i].getAttribute("MaterialClassCode");
if(n==0||v==val)id=arr[i].getAttribute("MaterialClassCode");
var str=new Option(arr[i].getAttribute("Description"),v);
obj.options.add(str);
n++;
}
}
var child=obj.getAttribute("ChildSelectName");
if(child!=null){
scs(id,child);
}
}
scs("0","MaterialClass1");
</script>
<?xml version="1.0" encoding="utf-8" ?>
<MaterialClasses>
<MaterialClass MaterialClassCode="01" pid="0" Description="鹰潭"/>
<MaterialClass MaterialClassCode="20" pid="01" Description="鹰潭1"/>
<MaterialClass MaterialClassCode="21" pid="01" Description="鹰潭2"/>
<MaterialClass MaterialClassCode="22" pid="20" Description="鹰潭1_1"/>
<MaterialClass MaterialClassCode="23" pid="20" Description="鹰潭1_2"/>
<MaterialClass MaterialClassCode="24" pid="21" Description="鹰潭2_1"/>
<MaterialClass MaterialClassCode="02" pid="0" Description="上饶"/>
<MaterialClass MaterialClassCode="30" pid="02" Description="上饶1"/>
<MaterialClass MaterialClassCode="31" pid="02" Description="上饶2"/>
<MaterialClass MaterialClassCode="32" pid="30" Description="上饶1_1"/>
<MaterialClass MaterialClassCode="33" pid="31" Description="上饶2_1"/>
<MaterialClass MaterialClassCode="03" pid="0" Description="景德镇"/>
<MaterialClass MaterialClassCode="04" pid="0" Description="向西一"/>
<MaterialClass MaterialClassCode="05" pid="0" Description="向西二"/>
<MaterialClass MaterialClassCode="06" pid="0" Description="萍乡"/>
<MaterialClass MaterialClassCode="07" pid="0" Description="新余"/>
<MaterialClass MaterialClassCode="08" pid="0" Description="九江"/>
<MaterialClass MaterialClassCode="09" pid="0" Description="吉安"/>
<MaterialClass MaterialClassCode="10" pid="0" Description="赣州"/>
<MaterialClass MaterialClassCode="11" pid="0" Description="向西电脱"/>
<MaterialClass MaterialClassCode="12" pid="0" Description="鹰潭综合"/>
</MaterialClasses>