javascript 函数破坏下拉菜单，但仅在 Firefox 中

Question

由于某种原因，这个函数在 Firefox 中做了一些奇怪的事情

function fadeOUT_sect(id) {
    if ( $("div#"+id).css("display")!="none") {
        $("div#"+id).fadeOut();
        $("div#"+id).find("ul").each(function() {
            var name = $(this).attr("id");
            $(this).find("input").removeAttr("checked");
            if ( $(this).find("select > option:first").val() != "-9" ) {
                $(this).find("select > option:first").attr({
                    value:"-9",
                    selected:"selected"
                }); // $.attr()
            } // if select

            // I've isolated the problem to this if-test
            if ( !($(this).find('input[value="-9"]').val()) ) {
            //   ^ I think the problem is here.
                $(this).find('input[type="text"]').val('');
                $(this).append('<input name="'+name+'" type="radio" value="-9" checked="checked" />');
            } // if

        }); // $.each()
    } // if
} // function

最初，出现问题的 HTML 如下所示:

<div id="2" style="display:none">
<ul id="state">
    <li>What state do you live in?</li>
    <li><select>
        <option value="-9" selected="selected"></option>
        <option value="AL">Alabama</option>
        …
    </select></li>
</ul>

在fadeIn()之后, div#2可见，第一个<option>变成<option value=""></option>当我单击下拉菜单时，我会看到所有选项。现在麻烦开始了:

当我选择一个选项时，下拉菜单消失，但条形/气泡为空白(并且我没有选择空白选项)。我再次单击下拉菜单，我的选项在列表中突出显示；我点击离开，条形/气泡再次变为空白。我第三次单击下拉菜单，选择空白选项，单击离开，单击返回，然后选择一个非空白选项，突然我可以在栏/气泡中看到文本。

此问题仅出现在 Mac 和 Windows 上的 Firefox (可能仅适用于 Mac) 中。在 Windows 或 Mac 中，以下任何一个都没有问题:Safari/Chrome、Opera、IE7+(IE6 根本无法显示页面)。

编辑我在多台计算机上的 Firefox、Safari/Chrome 和 Opera 中对此进行了测试，并得到了相同的结果(因此没有缓存/数据问题)。

编辑2 这是 jsfiddle 中重现的问题:http://jsfiddle.net/JakobJingleheimer/EkDdB/3/

编辑 3:我刚刚测试了 Firefox 版本 5 至 9，此问题出现在 Firefox 8+ 中。在阅读 v8 的发行说明时，他们似乎开始对 javascript 使用“类型推断”(但我不知道这可能会如何影响任何事物，也不知道如果确实如此，如何解决它)。

谢谢!

<强> Resolution :删除selected="selected"在 html 中，并删除 selected:"selected"来自.attr({…})和.removeAttr("selected")在 javascript/jQuery 中。

Answer 1

我可以在 Mac 版 Firefox 8.0.1 上重现该错误。

问题来 self 在下面注释掉的行。

function fadeIN_sect(id) {
    $("#" + id + ' > ul > input[value="9999"]').remove();
    //$("#" + id + " > ul > li > select > option:first").attr("value", "").removeAttr("selected");
    $("#" + id).fadeIn();
}

一旦我评论了该行，它就可以正常工作。您可以尝试分开线路并一次调试每个操作。

编辑:测试似乎指向removeAttr 调用。另外，如上面评论中所述，不要忘记缓存所有选择器。不断地选择它们是非常低效的。