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

Question

我使用 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 标记的文档类型数据时，我在 javascript 中遇到未定义的错误。无论如何要修复它？提前致谢。

Answer 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>

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

Populate multiple select drop down list from XML file using javascript

javascript

xml

html-select

drop-down-menu