<optgroup> 在 Opera 中使用 jQuery答案

【问题标题】：<optgroup> in Opera using jQuery<optgroup> 在 Opera 中使用 jQuery
【发布时间】：2010-11-01 22:03:25
【问题描述】：

我在使用 jQuery 的 Opera 中遇到了 <optgroup> 的问题。首先，这是代码：

// 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;
}

这个函数返回一个简单的apend()。发生的情况是只有<opgroup> 标签出现，没有任何选项，但仅在 Opera 中。它适用于 FF、Safari 和 IE。非常感谢任何帮助。

【问题讨论】：

Opera 10似乎不存在这个问题，只有Opera 9,6。

标签： jquery opera

【解决方案1】：

我在 Linux 上使用 jQuery 1.3 和 Opera 9.64 时遇到了同样的问题。如果我只是删除标记，列表就会神奇地出现。

稍微挖掘了一下，看起来这是一个 Opera 错误，而不是 jQuery 错误：http://dev.jquery.com/ticket/3040

显然也有一种解决方法：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);

【讨论】：

【解决方案2】：

我的PHP Form Class 中的 hierselect 菜单也遇到了这个问题，答案中给出的解决方法代码不起作用，但是这样做了：

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

必须先将 optGroup 附加到选择菜单，然后将选项附加到 optGroup。

【讨论】：