Firefox mengabaikan opsi yang dipilih = “dipilih”


112

Jika Anda mengubah dropdown dan menyegarkan halaman, Firefox tampaknya mengabaikan atribut yang dipilih.

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

Ini sebenarnya akan memilih opsi yang sebelumnya Anda pilih (sebelum refresh). Ini akhirnya menjadi masalah bagi saya karena ada peristiwa yang dipicu di dropdown yang mengubah hal-hal lain. Adakah cara untuk membuat firefox menghentikan perilaku ini (selain mengaktifkan peristiwa lain saat halaman dimuat)?


saya menghadapi masalah ini sekarang dan saya memperbaikinya menggunakan$('option:selected').each(function(){ $(this).prop('selected',true); });
plonknimbuzz

Saya perhatikan bahwa ini hanya terjadi untuk memilih elemen yang tidak memiliki atribut nama
Tlacaelel Ramon Luis

3
coba autocomplete = "off"
hemanjosko

Jawaban:


5

AFAIK, perilaku ini di-hardcode ke dalam Firefox.

Anda dapat mencoba mengatur setiap elemen formulir ke defaultValuepemuatan halamannya.


1
Apakah mudah melakukan ini untuk semua elemen dalam formulir?
kunci-monyet

@monkey menggunakan jQuery, itu harus seperti $(":input").val(this[0].defaultValue);(belum teruji); di JS normal, berjalan meskipun masingdocument.getElementsByTagname("select")
Pekka

Meskipun mungkin bukan solusi yang ideal, ini berhasil .. Anda harus memeriksa getAttribute ("dipilih")
kunci pas monyet

8
FYI - Ada jawaban yang jauh lebih baik di bawah ini oleh Marco Demaio
jonlink

281

Tambahkan autocomplete="off"atribut HTML ke setiap tag pilihan. (sumber: https://stackoverflow.com/a/8258154/260080 )

Ini memperbaiki perilaku ODD di FireFox.


7
Ini adalah preferensi saya (terima kasih banyak Marco dan kunci pas monyet, menyelamatkan beberapa gumpalan rambut saya di sana). Dan Anda juga harus menambahkannya ke setiap <input> dengan atribut "nilai" atau "diperiksa", dan <textarei> dengan konten.
Swanny

22
Ini pasti jawaban yang benar. Bekerja seperti pesona.
Andrew Senner

1
ini bukan w3c valid
Jose De Gouveia

1
Saya mengalami masalah yang sama di Windows, Firefox ver 44.0 (2016-Jan). Dan solusi ini masih berfungsi.
Steven

1
Bekerja seperti pesona di firefox 47.0.
Blackecho

72

Di firefox, saya perhatikan bahwa atribut "dipilih" tidak akan berfungsi kecuali Anda menempatkan pilihan di dalam formulir, di mana formulir tersebut memiliki atribut nama.


3
BAM! Itu memperbaikinya di mana autocomplete = "off" tidak.
little_birdie

Menghabiskan satu jam untuk menggaruk-garuk kepala dengan Firefox 78.0.2. Tidak membutuhkan nama di formulir saya tetapi memberikannya memberikan kelegaan.
betakilo

11

Baru saja mengalami masalah yang sama, percayalah sudah lebih dari 10 jam berjuang dengan perilaku firefox bodoh ini, saya memiliki 7 dropdown, masing-masing akan memicu acara dan mengisi 24 input tersembunyi, jadi Anda dapat membayangkan memiliki opsi yang tepat dipilih dengan 24 nilai masukan yang salah !!! solusi yang akhirnya saya temukan adalah mengatur ulang formulir dengan Javascript menambahkan baris kode ini:

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

PS: input memiliki nilai yang ditarik dari database, jadi mengatur ulang formulir tidak mengosongkan nilai apa pun tetapi dengan cara memberitahu firefox untuk kembali ke neraka ke opsi yang dipilih = dipilih!


Ini jawaban yang benar. Jawaban yang mengatakan untuk menggunakan "pelengkapan otomatis" pada elemen pilih salah karena "pelengkapan otomatis" BUKAN merupakan atribut yang valid untuk bidang pilihan menurut W3 dan akan menyebabkan "Pelengkapan otomatis atribut tidak diizinkan pada pemilihan elemen pada saat ini". kesalahan pada validasi.
Scott


5

Cobalah untuk menonaktifkan autocompleteatribut input pilih ... terkadang browser mengabaikan selectkarena itu


3

Saya menggunakan FF 25.0.1

Itu mengabaikan selected=""dan selected="selected".

Tapi kalau saya coba selectedlangsung saja opsi yang dipilih.

Perilaku aneh (tidak sesuai). Saya tahu selecteditu HTML5 yang valid dan itu bentuk terpendek, tetapi saya biasanya menulis kode yang juga memvalidasi XML dengan format yang baik, sehingga saya dapat menggunakan alat validasi XML apa pun untuk memeriksa hasil saya dengan cara yang sangat ketat (dan pertukaran data sangat mudah .. .)

Menurut W3C, varian ini harus valid pada atribut boolean:

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

Saya lebih suka yang pertama, karena hampir sesingkat varian terakhir (tidak sesuai xml) tetapi harus divalidasi sebagai XHTML5 DAN HTML5. Jadi saya berharap, Mozilla akan memperbaikinya!


3

gunakan .prop () daripada .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' );

Menggunakan .prop('selected', true);atau .prop('selected', false);(jQuery) untuk mengaktifkan / menonaktifkan berfungsi baik untuk Firefox dan Chrome.
JimB

2

Anda dapat memanggil .reset()formulir sebelum menyegarkan halaman.


2

lampirkan pilih dalam atribut formulir dan itu akan bekerja.

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

dan

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

2

Dengan nama lebih baik = >>

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

Pilih akan mengambil atribut yang dipilih



1

pelengkapan otomatis juga tidak berfungsi untuk saya.

Ini adalah perbaikan javscript yang ditulis di jquery yang saya gunakan:

$('input[type="radio"][selected]').click();

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

Dalam hal ini, ini berfungsi baik untuk Chrome dan Firefox.

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

Saya menggunakan, .attr()bukan.prop()


1

Untuk menampilkan item pertama dari dropdown, gunakan ProjectName.ClearSelection();

Letakkan baris di halaman desain Anda untuk bekerja di semua browser Dan juga letakkan ini di kode di belakang saat halaman dimuat.

$(document).ready(function () {
    $("#content_ProjectName option[value='1']").prop("selected", true);
});

0

Jika Anda mengubah pilih dan refresh halaman, firefox akan mengembalikan perubahan Anda pada formulir, itulah mengapa Anda merasa pemilihan tidak berfungsi. Daripada menyegarkan, coba buka tautan di tab baru.


Ini benar, namun tampaknya tidak menyelesaikan masalah saya. Saya masih membutuhkan penyelesaian karena acara onchange saya tidak aktif ketika firefox memulihkan perubahan apa pun ke formulir saat saya melakukan penyegaran.
kunci-monyet

0

Ini solusi saya:

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;
}

Saya hanya meletakkannya di bagian atas halaman (dengan kumpulan id yang sesuai), dan itu bekerja untuk saya. Mengganti getElementById dengan loop di atas semua pilihan di halaman, saya tinggalkan sebagai latihan untuk pembaca;).


0

Bagi saya tidak ada solusi di atas yang berhasil. Saya harus secara eksplisit mengatur pilihan jika tidak ada yang diatur:

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

Saya berharap firefox akan memperbaikinya :(


0

Di tempat kerja, saya baru saja memperbaiki bug di mana opsi kotak centang ditampilkan dengan benar di Chrome tetapi tidak di Firefox, di halaman web yang sama. Ternyata ada masalah yang sama sekali berbeda dari masalah di atas, tapi mungkin saja masalah yang Anda alami.

Di Chrome, kotak pilih warna font hitam. Untuk beberapa alasan di Firefox, kotak pilih mewarisi warna font dari penampung, yang berwarna putih. Setelah saya menambahkan aturan CSS untuk memaksa kotak pilih warna font menjadi hitam, kumpulan nilai ditampilkan dengan benar.


0

Tidak keduanya autocomplete="off" atau menempatkannya di dalam formkarya untuk saya.

Yang berhasil adalah hanya menggunakan atribut yang dipilih tanpa "nilai" seperti ini:

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

jadi baik itu membuat <option selected>...</option> , atau hanya<option>...</option>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.