Dropdown list box from XML element data by using JavaScript parser

We have seen how elements of a xml can be collected by using JavaScript parser and by using getElementsByTagName. We will use the same to create one drop down list box to display all the student name by adding data. Our data inside the dropdown list should have each student id as option and name in this format.

<select name=id>
<option value=5>Alex John</option>
...
</select>

We have used our sample xml file
Demo of displaying dropdown list box in xml
Here is the script.

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>demo of dropdown list using xml element data in JavaScript</title>
</head>
<body>


<script type="text/javascript">
if (window.XMLHttpRequest)
  {  my_xml=new XMLHttpRequest();
  }
else
  {
  my_xml=new ActiveXObject("Microsoft.XMLHTTP");
  }
/////////////////////////////

my_xml.open("GET",'../php_tutorial/file-xml-demo.xml',false);
my_xml.send();
xml_str=my_xml.responseXML; 

var x=xml_str.getElementsByTagName("name"); 
var y=xml_str.getElementsByTagName("id");
//document.write(x[0].getAttribute('name'));
var str ='<select name=id>';
for(i=0;i<x.length;i++){
str +='<option value=' + y[i].childNodes[0].nodeValue + '>' + x[i].childNodes[0].nodeValue + '</option>'; 
}
str +='</select>';
document.write(str);
</script>

</body>
</html>

Create one dropdown list and on select of one option the page will display respective student id , name and class.

Reading Attributes

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:

Subscribe to our YouTube Channel here