A More Complex Way of Building Replacement Combo Boxes

Now that the XML file is available, we can extract the data inside it and do something with it. The next function is as follows:

function writeOptions() {
   var options = file.getElementsByTagName("option");
   for (x = 0; x < options.length; x++) {
     var option = options[x].childNodes[0].nodeValue;
     var optionText = document.createTextNode(option);
     var newa = document.createElement("a");
     newa.className = "option";
     newa.href = "#";
     newa.onclick = function() {
       setOption(this);
     };
     var optionDiv = document.getElementById("combodiv");
     newa.appendChild(optionText);
     optiondiv.appendChild(newa);
   }
}

First, we set the contents of a new variable that holds an array of all of the elements in the XML file that match the specified string. Then a for loop executes once for each element in the options array. The first action is to get the text that is held in the element extracted from the XML file; this is done by addressing the nodeValue property of the first child node of the element, using the x variable to iterate through each element. We then create a variable that holds a newly created text node representing the text. Another variable is needed to hold an anchor element, of which we then set various properties. Next another variable is set that contains the text field in the HTML file. The text node we created is then appended to the anchor element, which is then appended to the text field in the DOM of the page.

To make the page work as it did before, the file variable should be added to the JavaScript file, and then the init() method should be updated to call the getOptions() function. Also, don't forget to remove the contents of the combodiv in the HTML file.

This method provides a more elegant way of adding options to the drop-down div, and while it would be possible to combine this with the previous way of using multiple divs to show additional options, it makes more sense code wise to use the overflow:auto rule in the CSS file to use a scroll bar where necessary, which should suffice in most situations. As you can see, it is easy to provide a much better looking drop-down box, that styles and functions consistently across the most popular browsers.