Jquery – in Opera using jQuery


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.

Best Solution

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(
// with append of course