How to update the Select menu using AJAX without a <div> inside the form

Question

I am using ajax call to update the selection menu. The ajax call puts the list into my selection menu, starting it from another .php file.

Here is a fragment of the JS insert:

if (req.status == 200) { document.getElementById('countydiv').innerHTML=req.responseText; } else { alert("There was a problem while using XMLHTTP:\n" + req.statusText); } 

And here is the HTML:

  <label for="county">County:</label> <div id="countydiv"> <select name="county"> <option>Select State First</option> </select> </div> 

Simple enough. the script works, but ONLY if there is <div id="countydiv"> .

How can I change JavaScript to work with markup that looks like this?

  <label for="county">County:</label> <select name="county"> <option>Select State First</option> </select> 

Update: Maybe I should enable the whole function:

 function getCounty(stateId) { var strURL="findCounty.php?state="+stateId; var req = getXMLHTTP(); if (req) { req.onreadystatechange = function() { if (req.readyState == 4) { // only if "OK" if (req.status == 200) { document.getElementById('countydiv').innerHTML=req.responseText; } else { alert("There was a problem while using XMLHTTP:\n" + req.statusText); } } } req.open("GET", strURL, true); req.send(null); } 

}

And the markup:

  <p> <label for="state">State:</label> <select name="state" onChange="getCounty(this.value)"> <option>Select State...</option> <option>1</option> <option>2</option> <option>3</option> </select> </p> <p> <label for="county">County:</label> <select name="county"> <option>Select State First</option> </select> </p> 

Answer 1

Without the node parent, you need to deal with the select tag, and you cannot use responseText as you want, Json can help you fill in.

 if (req.status == 200) { var i = 0; var options = document.getElementById("country").options; var json = eval("(" + req.responseText + ")"); for (var key in json) { var value = json[key]; options[i++] = new Option(key, value); } } <label for="county">County:</label> <select name="county" id="country"></select> 

Reply from php:

 { "USA": 1, "United Kingdom": 2 } 

Answer 2

Try the following:

 if (req.status == 200) { var selects = document.getElementsByTagName("select"); for(var i=0;i<selects.length;i++) { var s = selects[i]; if(s.name == "county") { var replacement = document.createElement("div"); replacement.innerHTML = req.responseText; s.parentNode.insertBefore(s,replacement); s.parentNode.removeNode(s); break; } } //document.getElementById('countydiv').innerHTML=req.responseText; } else { alert("There was a problem while using XMLHTTP:\n" + req.statusText); } 

Answer 3

I would suggest switching to a jquery route to make it easier for myself:

See this link for something that should lead you in the right direction: How to remove all the options of the selection window and then add one parameter and select it using jQuery?

In addition, IE6 has an error (if you support it) with dynamically populating Select elements that you should be aware of. http://support.microsoft.com/kb/276228