传统的html页面中连动下拉框采用了两种方法：
1）直接将下拉框中的内容hardcode于html的javascript中，调用javascript函数循环写入下拉框中。这种方法不适用于下拉框内容经常改变的情况。因为数据源和javascript程序写死在同一页面。
List <!--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 上海江西==所有地区==
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<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;}}var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");var i=0;var j=0;function deleteOption() { }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;}}}}在HTML中调用XML数据 类型子类account.xml 如下：Not Available dangdang1 dangdang2dangdang3dangdang4dangdang5dangdang6zhuce_user1 zhuce_user2tongxun
此方法将数据源与javascript程序分开，适合经常变化的数据源。xmlDoc.load中可以直接调用URL参数,读取远程XML，实现松耦合。以上应用在IE6.0中通过。不足之处是在去除下拉框列表内容时需要
重复执行删除操作，否则会有明显的bug.希望有读者能给指正。
立即学习“Java免费学习笔记（深入）”；
以上就是Javascript 调用XML制作连动下拉框代码实例详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1428907.html
微信扫一扫 
支付宝扫一扫 
