当前位置：首页 -> 技术开发 -> XML专区 -> Javascript 调用XML制作连动下拉框

Javascript 调用XML制作连动下拉框

时间： 2021-07-31 作者：daque

作家：何耀thursday, june 5 2003 2:44 pm

保守的html页面中连动下拉框沿用了两种本领：1）径直将下拉框中的实质hardcode于html的javascript中，挪用javascript因变量轮回写入下拉框中。这种本领不实用于下拉框实质常常变换的情景。由于数据源和javascript步调写死在同一页面。 <html><head><title>list</title><meta http-equiv="content-type" content="text/html; charset=gb2312"><script language="javascript"><!--var onecount;onecount=0;

subcat = new array();subcat[0] = new array("徐汇区","01","001");subcat[1] = new array("嘉定区","01","002");subcat[2] = new array("黄浦区","01","003");subcat[3] = new array("南昌市","02","004");subcat[4] = new array("九江市","02","005");subcat[5] = new array("上饶市","02","006");

onecount=6;

function changelocation(locationid){document.myform.smalllocation.length = 0;

var locationid=locationid;var i;document.myform.smalllocation.options[0] = new option('====一切地域====','');for (i=0;i <onecount; i++){if (subcat[i][1] == locationid){document.myform.smalllocation.options[document.myform.smalllocation.length]= new option(subcat[i][0], subcat[i][2]);}}

}

//--></script></head><body><form name="myform" method="post"><select name="biglocation"onchange="changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedindex].value)"><option value="01" selected>上海</option><option value="02">江西</option></select><select name="smalllocation"><option selected value="">==一切地域==</option></select></form><script language="javascript"></script></body></html>

2）javascript 径直读取数据库，取数据库中的记载写入javascript中，而后和第一种本领一律，挪用javascript因变量轮回写入下拉框中。此本领将数据源与javascript划分，但,公然数据库的贯穿，从安定观点说，没有几何适用价格。

我的本领是将下拉框中的数据放在xml文献中，用javascript读xml文献，博得下拉框中的实质。

html 文献如次：

<html><head><script language="javascript" for="window" event="onload">var xmldoc = new activexobject("microsoft.xmldom");var i=0;var j=0;var subclass_name="";loadxml();function loadxml(){xmldoc.async="false";xmldoc.load("account.xml");xmlobj=xmldoc.documentelement; nodes = xmldoc.documentelement.childnodes;document.frm.mainclass.options.length = 0; document.frm.subclass.options.length = 0;

for (i=0;i<xmlobj.childnodes.length;i++){labels=xmlobj.childnodes(i).getattribute("display_name");values=xmlobj.childnodes(i).text;document.frm.mainclass.add(document.createelement("option"));document.frm.mainclass.options[i].text=labels; document.frm.mainclass.options[i].value=values;

}

</script>

function deleteoption() { }

for (i=0;i<xmlobj.childnodes.length;i++){

var values="";var lables="";

if (is_selected=="y") return;labels=xmlobj.childnodes(i).getattribute("display_name");values=xmlobj.childnodes(i).text;//alert(labels+ " | "+main);if (labels==main){

is_selected="y";

for (j=0;j<xmlobj.childnodes(i).childnodes.length;j++){//subclass_name="document.frm.subclass";labels=xmlobj.childnodes(i).childnodes(j).getattribute("display_name");values=xmlobj.childnodes(i).childnodes(j).text;//alert(values); document.frm.subclass.add(document.createelement("option"));document.frm.subclass.options[j].text=labels; document.frm.subclass.options[j].value=values;

}

}}</script>

<title>在html中挪用xml数据</title></head><body bgcolor="#ffffff"><form name="frm"> 典型<select name="mainclass" onchange='setsubclass(this[selectedindex].text)'></select><option selected value="" ></option>子类<select name="subclass"></select></form></body></html>

account.xml 如次：

<?xml version="1.0" encoding="gb2312"?>

<item><class display_name="未选定"><subclass display_name="">not available</subclass> </class><class display_name="95788主叫卡"><subclass display_name="1152069589-1152069638">dangdang1</subclass> <subclass display_name="1152081031-1152081080">dangdang2</subclass><subclass display_name="1152547201-1105254750">dangdang3</subclass><subclass display_name="1152548401-1152548700">dangdang4</subclass><subclass display_name="1152548701-1152549000">dangdang5</subclass><subclass display_name="1156000001-1156010000">dangdang6</subclass></class><class display_name="网上备案"><subclass display_name="1152000001-1152001000">zhuce_user1</subclass> <subclass display_name="1151001000-1151005000">zhuce_user2</subclass></class><class display_name="通信"><subclass display_name="1156030001-1156080000">tongxun</subclass> </class>

</item>

此本领将数据源与javascript步调划分，符合常常变革的数据源。xmldoc.load中不妨径直挪用url参数,读取长途xml，实行松啮合。之上运用在ie6.0中经过。不及之处是在去除下拉框列表实质时须要反复实行简略操纵，要不会有鲜明的bug.蓄意有读者群能给教正。

Javascript 调用XML制作连动下拉框

相关推荐

推荐下载

热门阅览

最新排行