作家
登录

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

作者: 来源:www.28hudong.com 2013-03-30 04:10:32 阅读 我要评论

传统的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"><!--changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value);//--></script></body></html> 2)javascript 直接读取数据库,取数据库中的记录写入javascript中,然后和第一种方法一样,调用javascript函数循环写入下拉框中。此方法将数据源与javascript分开,但,公开数据库的连接,从安全角度说,没有多少实用价值。 我的方法是将下拉框中的数据放在XML文件中,用javascript读XML文件,取得下拉框中的内容。 HTML 文件如下:<!-- myfile.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> <script language="JavaScript" >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.length;i++) document.frm.subclass.options[i]=null ; } //重复才有效 if (document.frm.subclass.options.length!=0) { for (i=0;i<=document.frm.subclass.options.length;i++){ document.frm.subclass.options[i]=null ; document.frm.subclass.options.remove(i); } } 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="推荐网站"> <subclass display_name="看上去很美">www.7say.com</subclass> <subclass display_name="移动互联">www.xj139.com</subclass> <subclass display_name="众信实业">www.xjzxsy.com</subclass> </class> <class display_name="门户网站"> <subclass display_name="新浪">www.sina.com</subclass> <subclass display_name="搜狐">www.sohu.com</subclass> </class> <class display_name="其它网站"> <subclass display_name="蓝色理想">www.blueidea.com</subclass> </class></item>

  推荐阅读

  CheckBox 如何实现全选?

在一个表单中有很多CheckBox,请问如何实现选种一个而让所有的都选中? --------------------------------------------------------------- function selectAll(checkBoxName){ var elms = d>>>详细阅读


本文标题:Javascript调用XML制作连动下拉列表框

地址:http://www.17bianji.com/kaifa2/JS/31760.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)