Firefox ignora la opción seleccionada = "seleccionada"

112

Si cambia un menú desplegable y actualiza la página, Firefox parece ignorar el atributo seleccionado.

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

De hecho, seleccionará la opción que había seleccionado previamente (antes de la actualización). Esto termina siendo un problema para mí ya que hay un evento activado en el menú desplegable que cambia otras cosas. ¿Hay alguna forma de hacer que Firefox detenga este comportamiento (aparte de activar otro evento cuando se carga la página)?

llave inglesa
fuente
$('option:selected').each(function(){ $(this).prop('selected',true); });
Me
Noté que esto solo sucede con elementos seleccionados que carecen de un atributo de nombre
Tlacaelel Ramon Luis
3
intente autocomplete = "off"
hemanjosko

Respuestas:

5

AFAIK, este comportamiento está codificado en Firefox.

Puede intentar configurar cada elemento del formulario para que se defaultValuecargue en la página.

Pekka
fuente
1
¿Es fácil hacer esto para todos los elementos dentro del formulario?
llave inglesa
@monkey usando jQuery, debería ser algo como $(":input").val(this[0].defaultValue);(no probado); en JS normal, camina a través de cada unodocument.getElementsByTagname("select")
Pekka
Aunque tal vez no sea la solución ideal, esto funciona ... tienes que comprobar getAttribute ("selected")
llave inglesa
8
FYI - Hay una respuesta mucho mejor a continuación por Marco Demaio
jonlink
281

Agregue el autocomplete="off"atributo HTML a cada etiqueta de selección. (fuente: https://stackoverflow.com/a/8258154/260080 )

Esto corrige el comportamiento ODD en FireFox.

Marco Demaio
fuente
7
Esta es mi preferencia (muchas gracias Marco y llave inglesa, guardé algunos mechones de mi cabello allí). Y también tendrá que agregarlo a cada <input> con un atributo "value" o "check", y a cualquier <textarea> con contenido.
Swanny
22
Esta definitivamente debería ser la respuesta correcta. Funciona de maravilla.
Andrew Senner
1
esto no es un w3c válido
Jose De Gouveia
1
Tuve el mismo problema en Windows, Firefox ver 44.0 (2016-Jan). Y esta solución todavía funciona.
Steven
1
Funciona a la perfección en Firefox 47.0.
Blackecho
72

En Firefox, he notado que el atributo "seleccionado" no funcionará a menos que coloque la selección dentro de un formulario, donde el formulario tiene un atributo de nombre.

usuario1707970
fuente
3
¡BAM! Eso lo solucionó donde autocomplete = "off" no lo hizo.
little_birdie
Pasé una hora rascándome la cabeza con Firefox 78.0.2. No necesitaba un nombre en mi formulario, pero darle uno me alivió.
betakilo
11

Acabo de tener el mismo problema, créanme que han pasado más de 10 horas luchando con este estúpido comportamiento de Firefox, tengo 7 menús desplegables, cada uno de ellos activará un evento y completará 24 entradas ocultas, así que puedes imaginar tener la opción correcta seleccionada con 24 valores de entrada incorrectos !!! la solución que finalmente encontré es restablecer el formulario con Javascript agregando esta línea de código:

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

PD: las entradas tienen los valores extraídos de una base de datos, por lo que restablecer el formulario no vacía ningún valor, pero de alguna manera le dice a Firefox que regrese a la opción seleccionada = seleccionada.

Abdelkader Soudani
fuente
Esta es la respuesta correcta. Las respuestas que dicen usar "autocompletar" en un elemento seleccionado son incorrectas porque "autocompletar" NO es un atributo válido para un campo de selección de acuerdo con W3 y provocará "El atributo autocompletar no está permitido en la selección de elementos en este punto". errores en la validación.
Scott
5

Intente deshabilitar el autocompleteatributo de la entrada seleccionada ... a veces el navegador lo ignora selectdebido a eso

Arash Hatami
fuente
3

Estoy usando FF 25.0.1

Ignora selected=""yselected="selected" .

Pero si lo intento simplemente selectedse selecciona la opción.

Comportamiento extraño (no conforme). Sé que selectedes HTML5 válido y es la forma más corta, pero generalmente escribo código que también valida un XML bien formado, de modo que puedo usar cualquier herramienta de validación XML para verificar mis resultados de una manera muy estricta (y el intercambio de datos es muy fácil ... .)

Según W3C, estas variantes deberían ser válidas en atributos booleanos:

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

Prefiero la primera, ya que es casi tan corta como la última variante (no conforme con xml), pero debería validar tanto como XHTML5 como HTML5. ¡Así que espero que Mozilla lo solucione!

Miguel
fuente
3

use .prop () en lugar de .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
fuente
Usar .prop('selected', true);o .prop('selected', false);(jQuery) para habilitar / deshabilitar funciona tanto para Firefox como para Chrome.
JimB
2

Puede llamar .reset()al formulario antes de actualizar la página.

Neil
fuente
2

adjunte seleccionar en el atributo de formulario y funcionará.

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

y

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

Con el nombre es mejor = >>

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

La selección tomará el atributo seleccionado

snk
fuente
1

Tal vez sea un error en mozilla, pero intente darle un nombre al menú desplegable.

Cuarenta y dos
fuente
1

autocompletar tampoco me funcionaba.

Esta es la corrección de javscript escrita en jquery que uso:

$('input[type="radio"][selected]').click();
Danny van der Knaap
fuente
1
<option selected="selected" value="Test">Test</option>

En este caso, esto funcionó tanto para Chrome como para Firefox.

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

Estaba usando en .attr()lugar de.prop()

AndreL
fuente
1

Para mostrar el primer elemento del menú desplegable, use ProjectName.ClearSelection();

Coloque líneas en su página de diseño para que funcionen en todos los navegadores y también coloque esto en el código detrás de la carga de la página.

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

Si cambia la selección y actualiza la página, Firefox restaurará sus cambios en el formulario, por eso siente que la selección no funciona. En lugar de actualizar, intente abrir el enlace en una nueva pestaña.

Rodrigo
fuente
Esto es cierto, sin embargo, no parece resolver mi problema. Todavía necesito una solución ya que mi evento onchange no se activa cuando Firefox restaura cualquier cambio en el formulario cuando realizo una actualización.
llave inglesa
0

Esta es mi solucion:

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

Solo puse eso en la parte superior de la página (con el conjunto de identificación apropiado) y funciona para mí. Reemplazando el getElementById con un bucle sobre todas las selecciones en la página, lo dejo como ejercicio para el lector;).

Benubird
fuente
0

Para mí, ninguna de las soluciones anteriores funcionó. Tuve que establecer explícitamente la selección si no se estableció ninguna:

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

Desearía que Firefox arreglara esto :(

en caja
fuente
0

En el trabajo, acabo de corregir un error en el que la opción de cuadro de selección se mostraba correctamente en Chrome pero no en Firefox, en la misma página web. Resultó ser algo completamente diferente a los problemas anteriores, pero posiblemente podría ser un problema que está experimentando.

En Chrome, el color de fuente del cuadro de selección era negro. Por alguna razón, en Firefox, el cuadro de selección heredó el color de fuente del contenedor, que era blanco. Una vez que agregué una regla CSS para forzar que el color de fuente del cuadro de selección sea negro, el valor establecido se mostró correctamente.

Stefan Musarra
fuente
0

Ninguno de los dos autocomplete="off"o colocarlo dentro de un formfunciona para mí.

Lo que funcionó fue usar solo el atributo seleccionado sin "valor" como este:

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

entonces o se renderiza <option selected>...</option>, o simplemente<option>...</option>

uggeh
fuente