... > JavaScript > Заполнение списка выбора...

Заполнение списка выбора данными, полученными с сервера в JavaScript

НАВИГАЦИЯ ПО СТРАНИЦЕ

XMLHttpRequest Пример

Для заполнения списка выбора данными, полученными с сервера в формате XML, следует использовать XMLHttpRequest для получения данных и DOMParser для их анализа. После анализа XML-данных можно обновить список выбора в HTML.

Пример, как заполнить <select> данными, полученными с сервера в формате XML:

// Создаем XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      const xmlData = xhr.responseText;
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(xmlData, 'application/xml');

      // Получаем элементы из XML
      const items = xmlDoc.getElementsByTagName('item'); // Замените 'item' на тег, содержащий данные для вашего списка выбора

      // Находим ваш элемент <select> в HTML
      const selectElement = document.getElementById('yourSelectElementId'); // Замените 'yourSelectElementId' на ваш ID элемента <select>

      // Очищаем список выбора, если он уже заполнен
      selectElement.innerHTML = '';

      // Проходим по элементам XML и добавляем их в список выбора
      for (let i = 0; i < items.length; i++) {
        const value = items[i].textContent; // Значение элемента
        const option = document.createElement('option');
        option.value = value;
        option.textContent = value;
        selectElement.appendChild(option);
      }
    } else {
      console.error('Ошибка получения данных:', xhr.status);
    }
  }
};

xhr.open('GET', 'example.xml', true);
xhr.send();

Пожалуйста, обратите внимание, что вам нужно заменить item на тег, который содержит данные для вашего списка выбора, и yourSelectElementId на ID вашего элемента <select> в HTML.

Этот код получает XML-данные с сервера, парсит их, а затем создает опции для элемента <select>, заполняя его данными из XML.

Яндекс Практикум

Полезные ссылки:

zaka-zaka

Покупай игры выгодно

РЕКЛАМА, ООО «ГЕЙБСТОР» ИНН: 7842136365

zaochnik

Срочная помощь в написании всех видов работ

РЕКЛАМА, ООО «ЗАОЧНИК.КОМ.» ИНН: 7710949967

skyeng

Лучшие из курсов английского в Skyeng

РЕКЛАМА, ОАНО ДПО «СКАЕНГ» ИНН: 9709022748