<optgroup> in Opera using jQuery

Question

I'm having an issue with <optgroup> in Opera using jQuery. First, here's the code:

// returns a jQuery optgroup object
function getSpaceOptGroup(locationName) {
    var location = locations.first(function(l) {
     return l.name == locationName;
    });

    var optGroup = $("<optgroup label='" + location.name + "'></optgroup>");

    $.each(location.spaces, function(i,x) {
     optGroup.append("<option value='" + x.id + "'>" + x.name + "</option>");
    });

    return optGroup;
}

This function returns to a simple apend(). What happens is that only the <opgroup> label appears and none of the options, but only in Opera. It works in FF, Safari, and IE. Any help is much appreciated.

Answer 1

I'm seeing the same issue using jQuery 1.3 and Opera 9.64 on Linux. If I simply remove the <optgroup> tags, the list magically appears.

Doing a bit of digging, it looks like this is an Opera bug, not a jQuery bug: http://dev.jquery.com/ticket/3040

There is apparently a workaround as well: http://dev.jquery.com/ticket/3040#comment:7

// Do not use:
var optGroup = $("<optgroup></optgroup>");
var option = $("<option></option>");
// But:
var optGroup = $(document.createElement("optgroup"));
var option = $(document.createElement("option"));
// Then everything works as expected
optGroup.attr("label", "hello").append(
    option.append("foo"),
    option.clone().text("bar"));
// with append of course
$("select#test5").append(optGroup);