使用 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;
}

問題是我擁有的站點列表的數據比文檔類型多。 因此，當我嘗試跳過最后三個 xml 標記的 doctype 數據時，我在 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>