Accessing selected option within <select>

[Scribe]

Hi guys,I'm having some issues accessing the currently selected option in a drop-down list using JavaScript DOM. The selectedIndex always returns -1 in ie and 0 in chrome and the options array doesn't appear to exist at all in ie but does in chrome. The code and the final HTML seem to check out. Any ideas? Are there any known issues? Here's some code samples:

var searchBox = document.createElement( 'select' );				  				  searchBox.id = thisObject.id+'Search';				  				  for( var i = 0; i < columnNames.length; ++i )				  {					  var searchOption = document.createElement( 'option' );					  					  searchOption.text = columnNames[i];					  					  searchOption.value = searchOption.text;					  					  searchOption.id = searchOption.text;					  					  searchBox.add( searchOption , null ); 				  }

The box is eventually attached to the DOM and displays correctly in ie and chrome with correct HTML. Interestingly just with the following line after the code is placed in the DOM ie 8 falls apart:

alert(searchBox.options[1].text);

This line works in chrome and the HTML code in ie clearly shows the option to exist within the select element.This is all very confusing and frustrating, any ideas guys?Many thanks

[jeffman]

You're aware that the add method works differently in IE than in standards-compliant browsers?http://www.w3schools.com/jsref/met_select_add.aspI have no idea why the select would look right at all if the add method fails, but then IE is a mystery all around.

[Scribe]

I'm thinking perhaps this incompatibility doesn't appear in IE8 any more.Having said that I've implemented the fix with not change, the code is still broken =(

[Scribe]

Ok I've solved the problem,The issue was that after that code I was adding to the inner HTML of the containing element with a .innerHTML += " For: " and this seemed to break the functionality. I had to place any further text inside a labal and add that in via .appendChild().Many thanks