функция 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>, и когда я нажимаю на выпадающее меню, я вижу все свои опции.Теперь проблема начинается:

Когда я выбираю опцию, выпадающий список исчезает, но столбец / пузырь пуст (а я не выбрал пустую опцию).Я снова нажимаю на выпадающий список, и моя опция выделяется в списке;Я щелкаю прочь, и бар / пузырь снова становится пустым.Я щелкаю раскрывающийся список в третий раз, выбираю пустую опцию, щелкаю прочь, щелкаю назад и выбираю непустую опцию, и вдруг я вижу текст на панели / пузыре.

Проблема только встречается в Firefox (возможно, только для Mac) на Mac и Windows.Нет проблем в Windows или Mac для любого из следующего: Safari / Chrome, Opera, IE7 + (IE6 просто не может отобразить страницу вообще).

EDIT Я протестировал это в Firefox, Safari / Chrome и Opera на нескольких компьютерах и получили один и тот же результат (поэтому нет проблем с кешем / данными).

EDIT 2 Вот проблема, воспроизведенная в jsfiddle: http://jsfiddle.net/jshado1/EkDdB/3/

EDIT 3 : я только что протестировал версии Firefox с 5 по 9, и эта проблема возникает в Firefox 8 + .Читая заметки о выпуске v8, кажется, они начали использовать «Вывод типа» для javascript (но я не знаю, как это может повлиять на что-либо или как обойти это, если это произойдет).

Спасибо!

Разрешение : удалить selected="selected" в html и удалить selected:"selected" из .attr({…}) и .removeAttr("selected") в javascript / jQuery.

Answer 1

Я могу воспроизвести ошибку на Firefox 8.0.1 для Mac.

Проблема исходит из строки, которую я прокомментировал ниже.

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

Как только я прокомментировал эту строку, она отлично работает. Вы можете попробовать разделить строки и отладить каждое действие по одному.

Редактировать: похоже, что тестирование указывает на вызов removeAttr. Также, как отмечено в комментариях выше, не забудьте кэшировать все ваши селекторы. Выбирать их очень неэффективно.