Javascript调用XML制作连动下拉列表框

　　传统的HTML页面中连动下拉框采用了两种方法：

　　1)直接将下拉框中的内容hardcode于html的javascript中，调用javascript函数循环写入下拉框中。这种方法不适用于下拉框内容经常改变的情况。因为数据源和javascript程序写死在同一页面。

　　harset=gb2312">

　　

　　onChange="changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value)">上海

　　江西

　　==所有地区==

　　

　　2)javascript 直接读取数据库，取数据库中的记录写入javascript中，然后和第一种方法一样，调用javascript函数循环写入下拉框中。此方法将数据源与javascript分开，但,公开数据库的连接，从安全角度说，没有多少实用价值。

　　我的方法是将下拉框中的数据放在XML文件中，用javascript读XML文件，取得下拉框中的内容。

　　HTML 文件如下：

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

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

　　function setsubclass(main){

　　var is_selected="N";

　　if (document.frm.subclass.options.length!=0) {

　　for (i=0;i document.frm.subclass.options[i]=null ;

　　}

　　//重复才有效

　　if (document.frm.subclass.options.length!=0) {

　　for (i=0;i document.frm.subclass.options[i]=null ;

　　document.frm.subclass.options.remove(i);

　　}

　　}

　　for (i=0;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 //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;

　　}

　　}

　　}

　　}

　　类型

　　子类

　　account.xml 如下：

　　Not Available

　　www.7say.com

　　www.xj139.com

　　www.xjzxsy.com

　　www.sina.com

　　www.sohu.com

　　www.blueidea.com

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有