Display Student Details from an XML Dropdown

This application extends the XML dropdown example. It loads student names into a select control, then displays the selected student's id, name and class.

select.addEventListener('change', get_details);

Read the Selected Student ID Top ↑

The original tutorial uses getElementById() to get the dropdown value. The select keeps the original id student_id:

const select = document.getElementById('student_id');
const studentId = select.value;

Find the Matching XML Record Top ↑

As in the original tutorial, an if condition inside a loop matches the selected id with the XML id values:

for (let i = 0; i < ids.length; i += 1) {
  if ((ids[i].textContent ?? '') === studentId) {
    const name = names[i]?.textContent ?? '';
    const className = classes[i]?.textContent ?? '';
    display.textContent = `id = ${studentId}, Name: ${name}, Class: ${className}`;
    return;
  }
}

Display the Details Top ↑

The original code used innerHTML even though it only displayed text. The modern version uses textContent and keeps the same disp output element.

The same sample XML file is used, along with the element-display logic explained in Displaying XML Data.

Working Demo Top ↑

Demo: display student details from an XML dropdown

Complete Working Source Top ↑

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>XML student details demo</title>
</head>
<body>
  <label for="student_id">Student</label>
  <select id="student_id"></select>
  <p id="disp" aria-live="polite"></p>
  <p id="status" aria-live="polite"></p>

  <script>
    let xmlDocument = null;
    const select = document.getElementById('student_id');
    const display = document.getElementById('disp');
    const status = document.getElementById('status');

    function get_details() {
      if (!xmlDocument) return;

      const studentId = select.value;
      const names = xmlDocument.getElementsByTagName('name');
      const ids = xmlDocument.getElementsByTagName('id');
      const classes = xmlDocument.getElementsByTagName('class');

      for (let i = 0; i < ids.length; i += 1) {
        if ((ids[i].textContent ?? '') === studentId) {
          const name = names[i]?.textContent ?? '';
          const className = classes[i]?.textContent ?? '';
          display.textContent = `id = ${studentId}, Name: ${name}, Class: ${className}`;
          return;
        }
      }
      display.textContent = 'Student details are not available.';
    }

    const request = new XMLHttpRequest();
    request.open('GET', '../php_tutorial/file-xml-demo.xml', true);
    request.addEventListener('load', () => {
      xmlDocument = request.responseXML;
      if (!xmlDocument) {
        status.textContent = 'The XML response could not be parsed.';
        return;
      }

      const names = xmlDocument.getElementsByTagName('name');
      const ids = xmlDocument.getElementsByTagName('id');
      select.replaceChildren();

      for (let i = 0; i < names.length && i < ids.length; i += 1) {
        select.add(new Option(names[i].textContent ?? '', ids[i].textContent ?? ''));
      }
      status.textContent = `${select.options.length} students loaded.`;
      get_details();
    });
    request.addEventListener('error', () => {
      status.textContent = 'Unable to load the XML file.';
    });
    select.addEventListener('change', get_details);
    request.send();
  </script>
</body>
</html>

Dropdown listbox in XML

← XML

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: