changing innerHTML of a select box

[riddelrp]

Ok, here's my code

	var innerString;
	innerString = "<option value=\"C\">C</option>"
	alert(innerString);
	document.getElementById("DEFECT_5").innerHTML = innerString;
	alert(document.getElementById("DEFECT_5").innerHTML);

The first alert has the text:

"<option value="C">C</option>"

However, the second alert has:

"C</option>"

I also tried doing:

	var innerString;
	innerString = "<option value=\\\"C\\\">C</option>"
	alert(innerString);
	document.getElementById("DEFECT_5").innerHTML = innerString;
	alert(document.getElementById("DEFECT_5").innerHTML);

The first alert gives:

"<option value=\"C\">C</option>"

but the second alert still gives:

"C</option>"


oh yeah if I do this:

	var innerString;
	innerString = "/<option value=\"C\">C</option>"
	alert(innerString);
	document.getElementById("DEFECT_5").innerHTML = innerString;
	alert(document.getElementById("DEFECT_5").innerHTML);

Then the second alert comes out as:

"/<option value="C">C</option>"


Any ideas?

Thanks,
Ryan

[beetle]

Might be better to just go with the DOM method...

var selObj = document.getElementById("DEFECT_5");
var o = document.createObject("option");
var text = document.createTextNode("C");
o.setAttribute("value","C");
selObj.appendChild(o);
o.appendChild(text);

you could go on to make this a function...

function addOption(selName,optVal,optText) {
	var selObj = document.getElementById(selName);
	var o = document.createObject("option");
	var text = document.createTextNode(optText);
	o.setAttribute("value",optVal);
	selObj.appendChild(o);
	o.appendChild(text);
	}
// Example call
addOption('DEFECT_5','C','C');

[riddelrp]

thanks,

looks like this should work nicely

-Ryan

[d57rich]

Hi,

I've just found this post via the search, and when I try the function example addOption() by Beetle in FireFox 1.5.0.4, the javascript console shows the following error:

Error: document.createObject is not a function

Can anyone help?

Here is my code:

function addOption(selName,optVal,optText) {
	var selObj = document.getElementById(selName);
	var o = document.createObject("option");
	var text = document.createTextNode(optText);
	o.setAttribute("value",optVal);
	selObj.appendChild(o);
	o.appendChild(text);
}

function getDrivers(selectID, targetID){
		http.open('get', 'ajax/list_drivers.php?account_number=' + document.getElementById(selectID).options[document.getElementById(selectID).options.selectedIndex].value);

		http.onreadystatechange = function() {
			switch(http.readyState) {
				case 0: // Uninitialized
				break;
				
				case 1: // Loading
					//document.getElementById(targetID).innerHTML = '<option>Loading...</option>'; 
				break;
				
				case 2: // Loaded
				break;
				
				case 3: // Interactive
				break;
				
				case 4: // Done!
					var response = http.responseText;
					if(response == '') {
						document.getElementById(targetID).disabled = true;
						document.getElementById(targetID).innerHTML = '<option>No Drivers Found...</option>'; 
					} else {
						addOption(targetID,'C','C');					
					}
				break;
			}
		}
	http.send(null);
}

Thx in advance.
Rich

[beetle]

A thread revived from the dead!

I honestly don't know whey I used document.createObject() back then, haha. The correct method is document.createElement()

Reference: http://developer.mozilla.org/en/docs....createElement