javascript函数打破下拉菜单，但只是在Firefox

javascript function breaks drop-down menus but just in Firefox

本文关键字：Firefox 函数 下拉菜单 javascript      更新时间：2023-09-26

由于某些原因，这个函数在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根本无法显示页面)。

EDIT我在多台计算机上的Firefox, Safari/Chrome和Opera中测试了这一点，并得到了相同的结果(因此没有缓存/数据问题)。

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

EDIT 3:我刚刚测试了Firefox版本5到9，这个问题出现在Firefox 8+。在阅读v8的发布说明时，似乎他们开始使用"类型推断"。对于javascript(但我不知道这可能会影响什么或如何绕过它，如果它做)。

谢谢!

分辨率:删除html中的selected="selected"，并从javascript/jQuery中的.attr({…})和.removeAttr("selected")中删除selected:"selected"

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

问题来自我在下面注释掉的那行。

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

一旦我注释掉了那行，它就可以正常工作了。您可以尝试分隔行并一次调试每个操作。

编辑:测试似乎指向removeAttr调用。另外，正如上面评论中提到的，不要忘记缓存所有的选择器。继续选择它们是非常低效的
相关文章：