Using javascript and XML to populate a drop-down box

Question

Very new to all this, so please bear with me and use simple answers!

I am trying to dynamically populate a drop down box (theSecondBox), with a list of items which is dependent on the selection made in another drop down box (theCriteria).

I have been able to do an AJAX request and am getting an XML document back.

So far my script looks like this:-

<script type="text/javascript">
var xmlHttp;

function triggerAction(){
xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
criteria = document.getElementById("theCriteria").value;
xmlHttp.open("GET","MyURL?criteria=" + criteria, true);    
xmlHttp.send(null);  
}  

function handleStateChange(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
parseResults();}
}
}

This returns an XML document to me that looks like this :-

<list>
    <string>FirstDropDownItem</string>
    <string>SecondDropDownItem</string>
    <string>ThirdDropDownItem</string>
</list>

So, I'm trying to populate my second drop down box with these items, using something like ...

function parseResults(){

var results 
var selectTag

results = xmlHttp.responseXML;
selectTag = document.getElementById("theSecondBox");

...and this is where I need a few 'simple' pointers.

How do I populate the secondBox with the items returned in the XML document? Everything I've tried so far (and I won't reproduce it to save my embarrassment!) just gives me nulls.

Apologies for the simple question, but as I said, I'm not a programmer by any means, so any pointers to either a solution, or a good tutorial which will help to educate me would be much appreciated.

Answer 1

w3schools is not a good source but this one time pls take a look at (that "if" for IE5 is absolete now): http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first

Frankly document.getElementById("myDiv").innerHTML=xmlhttp.responseText is what you need. Just before that you can just replace "list" with "ul" and string with "li".

It would be better to change xml in backend but if you can't give str.replace a try...

var new_text = text.replace(/want/g, "dont want");