Demo of displaying dropdown list box in xml

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


Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com




    Post your comments , suggestion , error , requirements etc here .




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer