Add Options to a Select with jQuery : IE7

Posted by robbiebow on 7 August, 2008 under geek | 2 Comments to Read

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 = thisValue;
thisOpt.appendChild(document.createTextNode(thisText));
$(".months_menu").append(thisOpt);

  • steve said,

    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.

  • Robbie Bow said,

    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.

Add A Comment

home top