weird behavior w/ innerHTML and select tag 1

gacaccia · May 31, 2003

hi all,

i'm trying to do something that i assume is common, to have a select control with a list of options, and then to update that list of options based on user action.

my problem is, i'm using innerHTML to initialize and change the list of options, but for some reason the first "<option value='1'>" part of the new HTML is getting cut off.

here is the section of code for changing it. any thoughts? uList is the id for the HTML select tag. uList is also the name of a javascript array of objects with member properties including "sName".

Code:

function initList() {
	 document.getElementById(&quot;uList&quot;).innerHTML = &quot;&quot;;
	 for (i=0;i<uList.length;i++) {
			document.getElementById(&quot;uList&quot;).innerHTML += &quot;<option value='&quot; + i + &quot;'>&quot; + uList[i].sName + &quot;</option>&quot;;
	 }
}

if the array of uList.sName's include "zero" and "one", then the desired result for innerHTML would be...

Code:

<option value='0'>zero</option><option value='1'>one</option>

instead, i'm getting...

Code:

zero</option><option value='1'>one</option>

thanks,

glenn

gacaccia · May 31, 2003

as a follow up to my first post, i thought i'd make a test page to illustrate the problem. here's a complete html page that exhibits the problem.

Code:

<html><head><title>Test</title>
<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
<!--
list = new Array(&quot;zero&quot;,&quot;one&quot;,&quot;two&quot;);

function initList() {
		document.getElementById(&quot;list&quot;).innerHTML = &quot;&quot;;
		for (i=0;i<list.length;i++) {
				document.getElementById(&quot;list&quot;).innerHTML += &quot;<option value='&quot; + i + &quot;'>&quot; + list[i] + &quot;</option>&quot;;
		}		
		alert(document.getElementById(&quot;list&quot;).innerHTML);		 
}
//-->
</script>
</head><body onload=&quot;initList()&quot;>
<select id=&quot;list&quot;></select>
</body></html>

pmacg · May 31, 2003

How about using document.write?

gacaccia · May 31, 2003

that would certainly work for initializing the select control, but would not work for changing the list of options based on user input after the page had loaded. the above function, slightly modified, is what i want to use for changing the list of options in the select control.

besides, innerHTML is basically working, it's just skipping the first tag (in IE 6.0). anyone know why? am i doing something wrong or is this a bug?

jemminger · May 31, 2003

gacaccia,

you should be modifying a <select> list's options by creating new Option objects:

<html>
<head>
<script type="text/javascript">
function addOption() {
var oSel = document.forms[0].sel;
var oOpt = new Option("Opt_" + oSel.options.length, oSel.options.length);
oSel.options[oSel.options.length] = oOpt;
}
</script>
</head>
<body>
<form>
<select name="sel"></select>
<input type="button" value="add" onclick="addOption();"/>
</form>
</body>
</html>

=========================================================
try { succeed(); } catch(E) { tryAgain(); }
-jeff

http://www.jeffemminger.com

gacaccia · May 31, 2003

thanks for the response. i hadn't realized that method. still would like to know why innerHTML was acting so strange, but as long as there is a way to get the job done.

i actually ended up using the DOM methods for adding and removing nodes for option tags, though your solution looks simpler than what i did.

here are my finished functions for initializing, clearing and setting a select control.

Code:

function initList() {
	  clearList();
    for (i=0;i<uList.length;i++) {
	    	var option;
				var optionText;
				option = document.createElement(&quot;option&quot;);	 
				optionText = document.createTextNode(uList[i].sName);
				option.appendChild(optionText);
				option.setAttribute(&quot;value&quot;,i);
				document.getElementById(&quot;uList&quot;).appendChild(option);
		} 
}

function setList(indexes) {
 		clearList();
    for (i=0;i<indexes.length;i++) {
	    	var option;
				var optionText;
				option = document.createElement(&quot;option&quot;);	 
				optionText = document.createTextNode(uList[indexes[i]].sName);
				option.appendChild(optionText);
				option.setAttribute(&quot;value&quot;,indexes[i]);
				document.getElementById(&quot;uList&quot;).appendChild(option);
		} 
}

function clearList() {
	 var done;
	 var obj;
	 done = false;
	 obj = document.getElementById(&quot;uList&quot;);
	 while (done == false) {
	 		if (obj.hasChildNodes() == true) {
				obj.firstChild.removeNode(true);
			} else {
				done = true;
			}
	 }
}

friendlyposter · Jun 2, 2003

For an intranet where users are all ms Internet Explorer, there are IE-only methods as well:

See

http://wdvl.internet.com/Authoring/JavaScript/Begin/begin3-4.html

http://www.webreference.com/programming/javascript/beginning/chap6/5/3.html

Just an annoying but I think undocumented note: In IE at least, the style.display = 'none' property does not work to make options disappear from the users webpage.

jemminger · Jun 2, 2003

imho, why would you want to use anything other than the Option object? it's DOM (cross-browser) and it's very easy to use.

=========================================================
try { succeed(); } catch(E) { tryAgain(); }
-jeff

http://www.jeffemminger.com

dave4dl · Jul 9, 2003

I had a similar problem. I assume it is because the <OPTION> tag is a part of the <SELECT> tag though that doesnt really explain why innerhtml behaves the way it does. What i did was create a string with all my options in it and then use "outerHTML" and reprint the <SELECT> tags concatenated with the options string.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

weird behavior w/ innerHTML and select tag 1

gacaccia

Technical User

gacaccia

Technical User

pmacg

Programmer

gacaccia

Technical User

jemminger

Programmer

gacaccia

Technical User

friendlyposter

Programmer

jemminger

Programmer

dave4dl

Programmer

Similar threads

Part and Inventory Search

Sponsor