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

【问题标题】：Populate multiple select drop down list from XML file using javascript使用 javascript 从 XML 文件中填充多个选择下拉列表
【发布时间】：2020-12-16 14:44:04
【问题描述】：

我有两个使用 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;
}

问题是我拥有的站点列表的数据比文档类型多。因此，当我尝试跳过最后三个 xml 标记的 doctype 数据时，我在 javascript 中遇到了未定义的错误。有没有办法修复它？提前致谢。

【问题讨论】：

您确实意识到 Java 和 JavaScript 完全不相关，对吧？
您在这里有什么有价值的贡献吗？是的，我完全理解两者是不同的。我在这里寻找一个解决方案，无论是使用javascript还是java。这就是标签的原因。仅仅因为标签而投反对票是没有意义的。你可以简单地编辑它。

标签： javascript xml drop-down-menu html-select

【解决方案1】：

看它有点不同。您想要获取节点列表的文本内容（按标签名称）并过滤空值和重复值。

const sourceDocument = (new DOMParser).parseFromString(getXML(), 'text/xml');
addOptions(
  document.querySelector('#docTypeSelect'),
  sourceDocument.getElementsByTagName('doctype')
);
addOptions(
  document.querySelector('#siteSelect'),
  sourceDocument.getElementsByTagName('owngsite')
);

function addOptions(select, nodes) {
  const values = Array
    .from(nodes)
    // convert to string
    .map((node) => node.textContent.trim())
    // filter empty and duplicate values
    .filter(
      (value, index, self) => value !== '' && self.indexOf(value) === index
    );
  // remove all select child nodes
  select.textContent = '';
  // add the default
  let option = document.createElement('option');
  option.value = '';
  option.text = 'All';
  select.appendChild(option);
  // iterate values
  for (const value of values) {
    // add option
    option = document.createElement('option');
    option.value = value;
    option.text = value;
    select.appendChild(option);
  }
}


function getXML() {
  return `<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>
`;
}

<select id="docTypeSelect"></select>
<select id="siteSelect"></select>

【讨论】：