javascript读取xml

本文介绍了一个使用XML文件动态填充两个级联下拉菜单的JavaScript示例。通过解析XML文件,第一个下拉菜单展示不同的地区选项,当用户选择某个地区后,第二个下拉菜单会显示该地区对应的医院列表。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 有两个下拉框

<select id="diqu" οnchange="getyiyuan(this.value)"></select><br />
  <select id="yiyuan"></select>

脚本如下:

function getdiqu()
{xmlobj = CreateXMLDOM(); 
 //xmlobj = new ActiveXObject("MSXML2.DOMDocument"); 
xmlobj.load ("XMLFile.xml"); 
 var diqu=document.getElementById("diqu");
 var list = xmlobj.selectNodes("/root/diqu");
 for(i=0;i<list.length;i++)
 {
 var option = document.createElement('option');

option.value = list.item(i).selectNodes('@value')[0].text;

option.innerHTML =list.item(i).selectNodes('@name')[0].text;

diqu.appendChild(option);
}
}
function getyiyuan(diqu)
{//需要清空下拉框.要不内容重叠

 var yiyuan=document.getElementById("yiyuan");
yiyuan.length=0;
var option = document.createElement('option');
     option.value = 0;
    option.innerHTML ="请选择";
    yiyuan.appendChild(option);
 yiyuan.options.item='';
//获得地区所有的
  var list = xmlobj.selectNodes("/root/diqu");
  //alert(list.item(3).selectNodes('@value')[0].text);
 for(i=0;i<list.length;i++)
 {
 //如果是所选地区,循环下面的医院
 var yiyuanlist=list.item(i).selectNodes('yiyuan');
 if(diqu==list.item(i).selectNodes('@value')[0].text)
 {
     for(j=0;j<yiyuanlist.length;j++)
     {
      var option = document.createElement('option');
     option.value = list.item(i).selectNodes('yiyuan')[j].text;

    option.innerHTML =list.item(i).selectNodes('yiyuan')[j].text;
    yiyuan.appendChild(option);
     }

  }
 }

}


xml文件如下

  <?xml version="1.0" encoding="utf-8" ?> 
- <root>
- <diqu name="张家口" value="zjk">
  <yiyuan>第一附属医院</yiyuan> 
  <yiyuan>二五一</yiyuan> 
  </diqu>
- <diqu name="承德" value="cd">
  <yiyuan>承德第一医院</yiyuan> 
  <yiyuan>承德第二医院</yiyuan> 
  </diqu>
- <diqu name="廊坊" value="lf">
  <yiyuan>廊坊第一医院</yiyuan> 
  <yiyuan>廊坊第二医院</yiyuan> 
  </diqu>
- <diqu name="石家庄" value="sjz">
  <yiyuan>石家庄二院</yiyuan> 
  <yiyuan>石家庄三院</yiyuan> 
  </diqu>
  </root>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值