Add Options to a Select with jQuery : IE7
Problem: trying to add a new option to a select drop-down menu doesn't display the text in IE7.
Solution:
var thisValue = 12;
var thisText = 'December';
var thisOpt = document.createElement('option');
thisOpt.value = theValue;
thisOpt.appendChild(document.createTextNode(thisText));
$(".months_menu").append(thisOpt);
0 TrackBacks
Listed below are links to blogs that reference this entry: Add Options to a Select with jQuery : IE7.
TrackBack URL for this entry: http://www.robbiebow.co.uk/mt/mt-tb.cgi/70
I'm not sure how the append() method in jQuery works, but if it just wraps this type of structure, then you've encountered an IE bug (274 to be exact)
http://webbugtrack.blogspot.com/2007/08/bug-274-dom-methods-on-select-lists.html
e.g. if .append(str) translates to:
this.append = function(str){
this.innerHTML = str;
};
In IE you can't set the .innerHTML on a select element. you'll need to use the DOM zero style "new Option();" syntax. Or set the outerHTML.
I don't know how .append() works under the hood either, but I did try creating an option object using the "new Option()" syntax That result in the option being added but the text was not displayed.My only luck was with the createElement() - appendChild(createTextNode) syntax above.