Заполнение раскрывающегося списка множественного выбора из файла XML с помощью javascript

У меня есть два раскрывающихся списка, заполняемых из XML-файла с помощью javascript.

Вот моя дата в формате 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. Есть ли способ исправить это? Заранее спасибо.

# drop-down-menu html-select
Источник
  • 0
    Вы ведь понимаете, что Java и JavaScript совершенно не связаны, не так ли?
  • 0
    Есть ли у вас что-нибудь ценное? Да, я полностью понимаю, что оба они разные. Я ищу здесь решение, используя javascript или java. Вот почему тег. Нет смысла голосовать против только из-за тега. Вы могли бы просто отредактировать его.
Codelisting
за 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>

Codelisting
Популярные категории
На заметку программисту