Firefox ignoruje wybraną opcję = „wybrana”

112

Jeśli zmienisz listę rozwijaną i odświeżysz stronę, Firefox wydaje się ignorować wybrany atrybut.

<option selected="selected" value="Test">Test</option>

W rzeczywistości wybierze opcję, którą wcześniej wybrałeś (przed odświeżeniem). To kończy się dla mnie problemem, ponieważ w menu jest wyzwalane zdarzenie, które zmienia inne rzeczy. Czy istnieje sposób, aby Firefox zatrzymał to zachowanie (inny niż wywołanie innego zdarzenia podczas ładowania strony)?

klucz do małpy
źródło
Teraz mam do czynienia z tym problemem i naprawiam go za pomocą$('option:selected').each(function(){ $(this).prop('selected',true); });
plonknimbuzz
Zauważyłem, że dzieje się tak tylko w przypadku wybrania elementów, które nie mają atrybutu nazwy
Tlacaelel Ramon Luis
3
try autocomplete = "off"
hemanjosko

Odpowiedzi:

5

AFAIK, to zachowanie jest na stałe zakodowane w Firefoksie.

Możesz spróbować ustawić każdy element formularza na jego defaultValueładowanie podczas ładowania strony.

Pekka
źródło
1
Czy łatwo było to zrobić dla wszystkich elementów w formularzu?
klucz-małpka
@monkey przy użyciu jQuery, powinno to być coś w stylu $(":input").val(this[0].defaultValue);(nieprzetestowane); w normalnym JS, przejdź przez każdydocument.getElementsByTagname("select")
Pekka
Chociaż może nie jest to idealne rozwiązanie, to działa ... musisz sprawdzić getAttribute ("wybrane")
monkey-wrench
8
FYI - Jest znacznie lepsza odpowiedź poniżej przez Marco Demaio
jonlink
282

Dodaj autocomplete="off"atrybut HTML do każdego zaznaczonego tagu. (źródło: https://stackoverflow.com/a/8258154/260080 )

Naprawia to zachowanie ODD w FireFox.

Marco Demaio
źródło
7
To moje preferencje (wielkie dzięki Marco i małpce, zaoszczędziłem tam kilka kępek włosów). Będziesz także musiał dodać go do każdego elementu <input> z atrybutem „value” lub „check”, a także z dowolnym elementem <textarea> z zawartością.
Swanny
22
To zdecydowanie powinna być prawidłowa odpowiedź. Działa jak marzenie.
Andrew Senner
1
to nie jest w3c ważne
Jose De Gouveia
1
Miałem ten sam problem w systemie Windows, Firefox w wersji 44.0 (2016-styczeń). I to rozwiązanie nadal działa.
Steven
1
Działa jak urok w przeglądarce Firefox 47.0.
Blackecho
72

W Firefoksie zauważyłem, że atrybut „selected” nie będzie działał, dopóki nie umieścisz zaznaczenia wewnątrz formularza, gdzie formularz ma atrybut nazwy.

user1707970
źródło
3
BAM! To naprawiło problem, gdzie autocomplete = "off" nie.
little_birdie
Spędziłem godzinę drapiąc się po głowie w przeglądarce Firefox 78.0.2. Nie potrzebowałem nazwiska na moim formularzu, ale nadanie mu jednego przyniosło ulgę.
betakilo
11

Po prostu miałem ten sam problem, uwierz mi, że minęło ponad 10 godzin zmagania się z tym głupim zachowaniem Firefoksa, mam 7 rozwijanych menu, każdy z nich wyzwoli zdarzenie i wypełni 24 ukryte dane wejściowe, więc możesz sobie wyobrazić wybranie odpowiedniej opcji 24 błędne wartości wejściowe !!! rozwiązaniem, które w końcu znalazłem, jest zresetowanie formularza za pomocą JavaScript, dodając następujący wiersz kodu:

window.onload = function() { document.forms['MarkerForm'].reset(); };

PS: dane wejściowe mają wartości pobrane z bazy danych, więc zresetowanie formularza nie powoduje opróżnienia żadnej wartości, ale w pewnym sensie nakazuje firefoxowi wrócić do diabła do opcji selected = selected!

Abdelkader Soudani
źródło
To jest poprawna odpowiedź. Odpowiedzi mówiące o używaniu „autouzupełniania” na wybranym elemencie są błędne, ponieważ „autouzupełnianie” NIE jest prawidłowym atrybutem dla pola wyboru zgodnie z W3 i spowoduje, że „autouzupełnianie atrybutu nie jest dozwolone przy wyborze elementu w tym momencie”. błędy przy walidacji.
Scott,
5

Spróbuj wyłączyć autocompleteatrybut wyboru wejścia ... czasami przeglądarka ignoruje selectz tego powodu

Arash Hatami
źródło
3

Używam FF 25.0.1

Ignoruje selected=""i selected="selected".

Ale jeśli po prostu spróbuję, selectedopcja jest zaznaczona.

Dziwne (niezgodne) zachowanie. Wiem, że selectedjest to poprawny HTML5 i jest to najkrótsza forma, ale zwykle piszę kod, który również waliduje, podobnie jak dobrze sformatowany XML, więc mogę użyć dowolnego narzędzia walidacji XML, aby sprawdzić moje wyniki w bardzo ścisły sposób (a wymiana danych jest bardzo łatwa. .)

Według W3C te warianty powinny obowiązywać dla atrybutów logicznych:

HTML5:  boolAttr="" | boolAttr="boolAttr" | boolAttr
XHTML5: boolAttr="" | boolAttr="boolAttr"

Wolę pierwszy, ponieważ jest prawie tak krótki, jak ostatni (niezgodny z XML) wariant, ale powinien sprawdzać się zarówno jako XHTML5, jak i HTML5. Mam więc nadzieję, że Mozilla to naprawi!

Michael
źródło
3

użyj .prop () zamiast .attr ()

This does not work in firefox.
  $( 'option[value="myVal"]' ).attr( 'selected', 'selected' );
use this one
  $( 'option[value="myVal"]' ).prop( 'selected', 'selected' );

In other way
  $( this ).prop( 'selected', 'selected' );
Zaheer Babar
źródło
Użycie .prop('selected', true);lub .prop('selected', false);(jQuery) do włączania / wyłączania działa zarówno w przeglądarce Firefox, jak i Chrome.
JimB
2

Możesz wywołać .reset()formularz przed odświeżeniem strony.

Neil
źródło
2

ująć wybierz w atrybut formularza i zadziała.

<!-- will not work in firefox -->
<option selected="selected" value="Test">Test</option>

i

<!-- this will work in firefox -->
<form>
 <option selected="selected" value="Test">Test</option>
</form>
Muhammad Tahir
źródło
2

Z nazwą jest lepiej = >>

form id="UMForm" name="UMForm" class="form"

Zaznaczenie przyjmie wybrany atrybut

snk
źródło
1

Może to błąd w Mozilli, ale spróbuj nadać liście rozwijanej nazwę.

Czterdzieści dwa
źródło
1

autouzupełnianie też nie działało.

Oto poprawka javscript napisana w jQuery, której używam:

$('input[type="radio"][selected]').click();
Danny van der Knaap
źródło
1
<option selected="selected" value="Test">Test</option>

W tym przypadku działało to zarówno w przeglądarce Chrome, jak i Firefox.

$('option[value="Test"]').prop('selected', true);

Używałem .attr()zamiast.prop()

AndreL
źródło
1

Aby wyświetlić pierwszą pozycję z menu, użyj ProjectName.ClearSelection();

Umieść linie na swojej stronie projektu, aby działały we wszystkich przeglądarkach. Umieść to również w kodzie za ładowaniem strony.

$(document).ready(function () {
    $("#content_ProjectName option[value='1']").prop("selected", true);
});
Chinmaya
źródło
0

Jeśli zmienisz zaznaczenie i odświeżysz stronę, firefox przywróci zmiany w formularzu, dlatego masz wrażenie, że zaznaczanie nie działa. Zamiast odświeżać, spróbuj otworzyć link w nowej karcie.

Rodrigo
źródło
To prawda, ale nie wydaje się, aby rozwiązać mój problem. Nadal potrzebuję obejścia, ponieważ moje zdarzenie onchange nie jest uruchamiane, gdy Firefox przywraca jakiekolwiek zmiany w formularzu po odświeżeniu.
małpa-klucz
0

To jest moje rozwiązanie:

var select = document.getElementById('my_select');
for(var i=0; i < select.options.length; i++){
    select.options[i].selected = select.options[i].attributes.selected != undefined;
}

Po prostu umieściłem to na górze strony (z odpowiednim ustawionym identyfikatorem) i to działa. Zastąpienie getElementById pętlą nad wszystkimi zaznaczeniami na stronie zostawiam jako ćwiczenie dla czytelnika;).

Benubird
źródło
0

U mnie żadne z powyższych rozwiązań nie zadziałało. Musiałem wyraźnie ustawić wybór, jeśli żaden nie został ustawiony:

if (foo.find(':selected').length === 0) {
    $(foo.find('option')[0]).attr('selected', 'selected');
}

Chciałbym, żeby Firefox to naprawił :(

zapakowane
źródło
0

W pracy właśnie naprawiłem błąd polegający na tym, że opcja zaznaczania pola wyświetlała się poprawnie w przeglądarce Chrome, ale nie w przeglądarce Firefox na tej samej stronie internetowej. Okazało się, że to coś zupełnie innego niż powyższe problemy, ale może to być problem, którego doświadczasz.

W przeglądarce Chrome kolor czcionki w polu wyboru był czarny. Z jakiegoś powodu w przeglądarce Firefox pole wyboru odziedziczyło kolor czcionki z kontenera, który był biały. Gdy dodałem regułę CSS, aby wymusić, że kolor czcionki w polu wyboru będzie czarny, zestaw wartości był poprawnie wyświetlany.

Stefan Musarra
źródło
0

Ani autocomplete="off"umieszczenie go w środku, nie formdziała dla mnie.

Co pracował było użyć tylko wybranego atrybutu bez „wartości” jak poniżej:

<option @(Model.Source == TermSource.Instagram ? "selected" : "")>
    Instagram
</option>
<option @(Model.Source == TermSource.Facebook ? "selected" : "")>
    Facebook
</option>

więc albo renderuje <option selected>...</option>, albo po prostu<option>...</option>

uggeh
źródło