Populate DropDownList from XML using JavaScript

In this article I will explain with an example, how to dynamically populate DropDownList i.e. HTML Select element on Button click from XML using JavaScript.

The XML will be read and parsed and then one by one the Node data from the XML data will be added as Items (Options) to DropDownList using plain JavaScript.

Populate DropDownList from XML using JavaScript

The following HTML Markup consists of an HTML DropDownList and a Button. When the Button is clicked, the XML will be parsed and its Node values will be read and used to populate the HTML DropDownList with XML data.

<head>

</head>

<body>

<hr />

</select>

function PopulateDropDownList() {

//Build an XML containing Customer records.

var xml = "<Customers>";

xml += "<Customer>";

xml += "<CustomerId>1</CustomerId><Name>John Hammond</Name><Country>United States</Country>";

xml += "</Customer>";

xml += "<Customer>";

xml += "<CustomerId>2</CustomerId><Name>Mudassar Khan</Name><Country>India</Country>";

xml += "</Customer>"

xml += "<Customer>";

xml += "<CustomerId>3</CustomerId><Name>Suzanne Mathews</Name><Country>France</Country>";

xml += "</Customer>";

xml += "<Customer>";

xml += "<CustomerId>4</CustomerId><Name>Robert Schidner</Name><Country>Russia</Country>";

xml += "</Customer>";

xml += "</Customers>";

var xmlDoc;

if (window.DOMParser) {

parser = new DOMParser();

xmlDoc = parser.parseFromString(xml, "text/xml");

}

else //For IE

{

xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async = false;

xmlDoc.loadXML(xml);

}

var customers = xmlDoc.getElementsByTagName("Customer");

var ddl = document.getElementById("ddlCustomers");

for (var i = 0; i < customers.length; i++) {

var option = document.createElement("option");

//Set Customer Name in Text part.

option.text = customers[i].getElementsByTagName("Name")[0].textContent;

//Set Customer CustomerId in Value part.

option.value = customers[i].getElementsByTagName("CustomerId")[0].textContent;

//Add the Option element to DropDownList.

ddl.options.add(option);

}

</script>

</body>

</html>

Explanation:

When the Populate DropDownList button is clicked, the PopulateDropDownList JavaScript function is called. Inside the JavaScript function, first the XML string is generated and the XML string is read into an XML document and then the specific nodes i.e. Customer node are read into a JavaScript object.

Note: For more details on parsing the XML file using JavaScript, please refer my article, Read and Parse XML string using JavaScript.

Then a loop is executed over all the Customer nodes and inside the loop, the values of the CustomerId and Name child nodes is read and is used to create and add HTML Option element to the HTML DropDownList.

Note: For more details on adding items by creating HTML Option element to HTML DropDownList using JavaScript, please refer my article, Add (Insert) Items (Options) to DropDownList on Button click using JavaScript.

Screenshot