<optgroup> dans Opera utilisant jQuery

Question

J'ai un problème avec <optgroup> dans Opera en utilisant jQuery. Tout d'abord, voici le 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; 
} 

Cette fonction revient à une apend() simple. Ce qui se passe est que seul le label <opgroup> apparaît et aucune des options, mais seulement dans Opera. Cela fonctionne dans FF, Safari et IE. Toute aide est très appréciée.

Answer 1

Je vois le même problème en utilisant jQuery 1.3 et Opera 9.64 sous Linux. Si je supprime simplement les balises <optgroup>, la liste apparaît comme par magie.

Faire un peu de creuser, il ressemble à ceci est un bug Opera, pas un bug jQuery: http://dev.jquery.com/ticket/3040

Il y a apparemment une solution aussi bien: 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); 

Answer 2

J'ai aussi couru dans ce problème pour le menu hierselect dans mon PHP Form Class et le code de solution donnée dans la réponse ne fonctionnait pas, mais cela fait:

var optGroup = $(document.createElement("optgroup")).attr("label", "hello"); 
$("select#test5").append(optGroup); 
optGroup.append($(document.createElement("option")).val("foo").html("bar")); 

L'optGroup doit d'abord être ajouté au menu de sélection, puis les options ajoutées à l'optGroup.