使用javascript从XML文件填充多个选择下拉列表

我使用javascript从xml文件中填充了两个下拉列表

以下是我的xml日期：

<root>
<DocTypes>
    <doctype>Protocols</doctype>
    <owngsite>CIMA</owngsite>
</DocTypes>
<DocTypes>
    <doctype>Form</doctype>
    <owngsite>EU Headquaters</owngsite>
</DocTypes>
<DocTypes>
    <doctype>Master Batch Record</doctype>
    <owngsite>France (Country Operations)</owngsite>
</DocTypes>
<DocTypes>
    <doctype>Method</doctype>
    <owngsite>Maisons-Alfort CDC</owngsite>
</DocTypes>
<DocTypes>
    <doctype>Policy</doctype>
    <owngsite>Malvern</owngsite>
</DocTypes>
<DocTypes>
    <doctype>Procedure</doctype>
    <owngsite>Salt Lake City</owngsite>
</DocTypes>
<DocTypes>
    <doctype>Specification</doctype>
    <owngsite>Mitry Mory</owngsite>
</DocTypes>
<DocTypes>
    <doctype>Standard</doctype>
    <owngsite>Nevers</owngsite>
</DocTypes>
<DocTypes>
    <doctype></doctype>
    <owngsite>Savigny Le Temple</owngsite>
</DocTypes>
<DocTypes>
    <doctype></doctype>
    <owngsite>Sens</owngsite>
</DocTypes>
<DocTypes>
    <doctype></doctype>
    <owngsite>WC-Frazer</owngsite>
</DocTypes>

</root>

以下是我的javascript：

var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest;
}
/*else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP"); //code for IE6, IE5
}*/

xhr.open('GET','metaFiles/searchPage/js/docType.xml',true);
xhr.send();

window.onload = function()
{
    var x, xmldoc;
    xmldoc = xhr.responseXML;
    x = xmldoc.getElementsByTagName("DocTypes");
    var select1 = document.getElementById("doctype");
    var option = document.createElement('option');
    option.text = "All";
    option.value = "empty";
    select1.add(option);
    var option2;
    //document.write(x.length);
    for (var i = 0; i <x.length; i++) 
    {
        option2 = document.createElement('option');
        option2.text = x[i].getElementsByTagName("doctype")[0].childNodes[0].nodeValue;
        option2.value = x[i].getElementsByTagName("doctype")[0].childNodes[0].nodeValue;
        select1.add(option2);
    }
    
    var select2 = document.getElementById("owngsite");
    var option4 = document.createElement('option');
    option4.text = "All";
    option4.value = "empty";
    select2.add(option4);
    var option3;
    for(var i=0; i<x.length; i++)
    {
        option3 = document.createElement('option');
        option3.text = x[i].getElementsByTagName("owngsite")[0].childNodes[0].nodeValue;
        option3.value = x[i].getElementsByTagName("owngsite")[0].childNodes[0].nodeValue;
        //document.write(x[i]);
        select2.add(option3);
            
    }

    return xhr;
}

问题是我拥有的站点列表的数据比doctype多。因此，当我试图跳过最后三个xml标记的doctype数据时，javascript中出现了未定义的错误。 有没有办法解决这个问题？

---

提前谢谢。

换个角度看。您希望按标记名获取节点列表的文本内容，并筛选空值和重复值

const sourceDocument=new DOMParser.parseFromStringgetXML，“text/xml”； 添加选项 document.querySelector'docTypeSelect'， sourceDocument.getElementsByTagName'doctype' ; 添加选项 document.querySelector'siteSelect'， sourceDocument.getElementsByTagName'owngsite' ; 功能添加选项选择，节点{ 常量值=数组 .fromnodes //转换为字符串 .mapnode=>node.textContent.trim //筛选空值和重复值 滤器 值，索引，self=>value！=&&self.indexOfvalue===index ; //删除所有选择的子节点 select.textContent=； //添加默认值 让option=document.createElement'option'； option.value=； option.text='All'； 选择.appendChildoption； //迭代值 对于值的常量值{ //添加选项 option=document.createElement'option'； option.value=值； option.text=值； 选择.appendChildoption； } } 函数getXML{ 返回` 协议 CIMA 类型 欧盟总部 主批次记录 法国国家业务 方法 艾尔弗特疾病预防控制中心 政策 马尔文 程序 盐湖城 规格 米特里莫里 标准 内弗斯 萨维尼神庙 森斯 WC弗雷泽 `; }

---

你知道Java和JavaScript是完全不相关的，对吗？你有什么有价值的贡献吗？是的，我完全理解两者的不同。我在这里寻找一个解决方案，可以使用javascript或java。这就是为什么标签。没有理由仅仅因为一个标签就投反对票。你可以简单地编辑它。