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 中对此进行了测试，得到了相同的结果（因此没有缓存/数据问题）。

EDIT 2这是在 jsfiddle 中重现的问题：http://jsfiddle.net/JakobJingleheimer/EkDdB/3/

EDIT 3：我刚刚测试了 Firefox 版本 5 到 9，这个问题出现在 Firefox 8+ 中。在阅读 v8 的发行说明时，他们似乎开始对 javascript 使用“类型推断”（但我不知道这会如何影响任何事情，或者如果确实如此，如何绕过它）。

谢谢！

Resolution：在 html 中删除 selected="selected"，并在 javascript/jQuery 中从 .attr({…}) 和 .removeAttr("selected") 中删除 selected:"selected"。

Answer 1

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

问题出在我在下面注释掉的那一行。

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

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

编辑：测试似乎指向 removeAttr 调用。同样如上面的 cmets 所述，不要忘记缓存所有选择器。一直选择它们是非常低效的。