javascript读取xml_document.getelementbyid("diqu").innerhtml= diqu;-优快云博客

本文链接：https://blog.youkuaiyun.com/HelpSystem/article/details/6706946

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

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

有两个下拉框

脚本如下：

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>