Menu
Im trying to use the information being imported from my XML document to create market-up form my drop down box. The idea is to create and <option> element with the length of that the States information im importing from the XML document. So that lets say i add/delete state information to my XML document it will add/delete that <option> from my drop down list on my HTML page.
Here is what i have so far
i’am able to get one of the states to show. and i believe it wants to do the other but my code is only creating one instance of createElement(“option”). i don’t wanna type this code a gain and again. it defeats the purpose.
html document
[CODE]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=’http://www.w3.org/1999/xhtml’ xml:lang=’en’>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>DropDownBox</title>
</head>
<script type=”text/javascript”>
window.onload = startRequst;
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(){
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open(“GET”, “parseXML.xml”, true);
xmlHttp.send(null);
}
function handleStateChange(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
dropDownBox();
}
}
}
function dropDownBox(){
var xmlDoc = xmlHttp.responseXML;
var northNode = xmlDoc.getElementsByTagName(“north”)[0];
var northStates = northNode.getElementsByTagName(“state”);
for (var i = 0; i < northStates.length; i++) {
var states = northStates[i].childNodes[0].nodeValue;
alert(states);
var state = document.createTextNode(states);
var container = document.createElement(“option”);
container.appendChild(state);
}
document.getElementsByTagName(“select”)[0].appendChild(container);
}
</script>
<body>
<h1>Process XML Document of U.S. States</h1>
<br/><br/>
<form action=”#”>
<br/><br/>
<select>
//This is the selection filled i am trying options to.:confused:
</select>
</form>
</body>
</html>
Xml document
[CODE]
<?xml version=”1.0″ encoding=”UTF-8″?>
<states>
<north>
<state>Minnesota</state>
<state>Iowa</state>
<state>North Dakota</state>
</north>
<south>
<state>Texas</state>
<state>Oklahoma</state>
<state>Louisiana</state>
</south>
<east>
<state>New York</state>
<state>North Carolina</state>
<state>Massahusetts</state>
</east>
<west>
<state>California</state>
<state>Oregon</state>
<state>Navada</state>
</west>
</states>
I found this information below but i don’t know how to apply it to my item
[url]http://www.javascriptkit.com/javatutors/selectcontent.shtml
When repopulating a select element’s content, you may want to use a loop instead of changing each option one by one. Furthermore, the total number of options may not be known in advance (such as 3 above), so you need a dynamic way to add new options to select. In this case, use the below:
var master=document.myform.master
for (i=0; i<somevariable; i++){
master.options[master.options.length]=new Option(…)
}