O Firefox ignora a opção selecionada = “selecionada”


112

Se você alterar uma lista suspensa e atualizar a página, o Firefox parece ignorar o atributo selecionado.

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

Na verdade, ele selecionará a opção que você selecionou anteriormente (antes da atualização). Isso acaba sendo um problema para mim, pois há um evento disparado no menu suspenso que muda outras coisas. Existe uma maneira de fazer o firefox interromper esse comportamento (diferente de disparar outro evento quando a página for carregada)?


Eu enfrento esse problema agora e o conserto usando$('option:selected').each(function(){ $(this).prop('selected',true); });
plonknimbuzz

Percebi que isso só acontece para selecionar elementos que não possuem um atributo de nome
Tlacaelel Ramon Luis

3
tente autocomplete = "off"
hemanjosko

Respostas:


5

AFAIK, esse comportamento está embutido no Firefox.

Você pode tentar definir cada elemento do formulário para o seu defaultValuecarregamento na página.


1
Existe uma maneira fácil de fazer isso para todos os elementos do formulário?
chave inglesa de

@monkey usando jQuery, deve ser algo como $(":input").val(this[0].defaultValue);(não testado); em JS normal, caminhe por cada umdocument.getElementsByTagname("select")
Pekka

Embora talvez não seja a solução ideal, isso funciona .. você tem que fazer uma verificação em getAttribute ("selected")
monkey-wrench

8
Para sua informação - há uma resposta muito melhor abaixo de Marco Demaio
jonlink

281

Adicione o autocomplete="off"atributo HTML a cada marca selecionada. (fonte: https://stackoverflow.com/a/8258154/260080 )

Isso corrige o comportamento ODD no FireFox.


7
Essa é a minha preferência (muito obrigado Marco e chave inglesa, guardou alguns tufos do meu cabelo aí). E você também terá que adicioná-lo a cada <input> com um atributo "valor" ou "verificado" e a qualquer <textarea> com conteúdo.
Swanny

22
Esta definitivamente deve ser a resposta correta. Funciona como um encanto.
Andrew Senner

1
este não é um w3c válido
Jose De Gouveia

1
Eu tive o mesmo problema no Windows, Firefox versão 44.0 (2016-Jan). E essa solução ainda funciona.
Steven

1
Funciona perfeitamente no firefox 47.0.
Blackecho

72

No firefox, notei que o atributo "selected" não funcionará a menos que você coloque o select dentro de um formulário, onde o formulário tem um atributo de nome.


3
BAM! Isso corrigiu onde autocomplete = "off" não.
little_birdie

Passei uma hora coçando minha cabeça com o Firefox 78.0.2. Não precisava de um nome no meu formulário, mas dar-lhe um alívio.
betakilo

11

Acabei de ter o mesmo problema, acredite, já se passaram mais de 10 horas lutando com esse comportamento estúpido do firefox, tenho 7 menus suspensos, cada um deles irá disparar um evento e preencher 24 entradas ocultas, então você pode imaginar ter a opção certa selecionada com 24 valores de entrada errados !!! a solução que finalmente encontrei é redefinir o formulário com Javascript adicionando esta linha de código:

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

PS: as entradas têm os valores extraídos de um banco de dados, então redefinir o formulário não esvazia nenhum valor, mas de certa forma diz ao firefox para voltar e voltar para a opção selected = selected!


Essa é a resposta correta. As respostas dizendo para usar "preenchimento automático" em um elemento selecionado estão erradas porque "preenchimento automático" NÃO é um atributo válido para um campo de seleção de acordo com W3 e causará "preenchimento automático de atributo não permitido na seleção de elemento neste ponto." erros na validação.
Scott,


5

Tente desativar o autocompleteatributo de seleção de entrada ... às vezes o navegador ignora selectpor causa disso


3

Estou usando FF 25.0.1

Ignore selected=""e selected="selected".

Mas se eu simplesmente tentar, selecteda opção está selecionada.

Comportamento estranho (não conforme). Eu sei que selectedé HTML5 válido e é a forma mais curta, mas normalmente escrevo código que também valida XML bem formado, para que eu possa usar qualquer ferramenta de validação XML para verificar meus resultados de uma forma muito estrita (e a troca de dados é muito fácil. .)

De acordo com o W3C, essas variantes devem ser válidas em atributos booleanos:

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

Eu prefiro o primeiro, pois é quase tão curto quanto a última variante (não compatível com xml), mas deve ser validado como XHTML5 E HTML5. Portanto, espero que a Mozilla conserte isso!


3

use .prop () em vez 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' );

Usar .prop('selected', true);ou .prop('selected', false);(jQuery) para ativar / desativar funciona tanto para Firefox quanto para Chrome.
JimB de

2

Você pode chamar .reset()o formulário antes de atualizar a página.


2

inclua select no atributo form e ele funcionará.

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

e

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

2

Com o nome fica melhor = >>

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

A seleção irá pegar o atributo selecionado



1

o preenchimento automático também não estava funcionando para mim.

Esta é a correção javscript escrita em jquery que eu uso:

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

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

Nesse caso, isso funcionou tanto para o Chrome quanto para o Firefox.

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

Eu estava usando em .attr()vez de.prop()


1

Para mostrar o primeiro item da lista suspensa, use ProjectName.ClearSelection();

Coloque linhas em sua página de design para funcionar em todos os navegadores E também coloque isso no code-behind no carregamento da página.

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

0

Se você alterar o select e atualizar a página, o firefox irá restaurar suas alterações no formulário, é por isso que você sente que o select não está funcionando. Em vez de atualizar, tente abrir o link em uma nova guia.


Isso é verdade, porém não parece resolver meu problema. Eu ainda preciso de uma solução alternativa, pois meu evento onchange não dispara quando o firefox restaura quaisquer alterações no formulário quando eu faço uma atualização.
chave inglesa de

0

Esta é a minha solução:

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

Acabei de colocar isso no topo da página (com o conjunto de id apropriado) e funciona para mim. Substituindo getElementById por um loop sobre todas as seleções na página, deixo como um exercício para o leitor;).


0

Para mim, nenhuma das soluções acima funcionou. Tive que definir explicitamente a seleção se nenhuma foi definida:

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

Eu gostaria que o Firefox corrigisse isso :(


0

No trabalho, acabei de consertar um bug em que a opção da caixa de seleção era exibida corretamente no Chrome, mas não no Firefox, na mesma página da web. Acabou sendo algo completamente diferente dos problemas acima, mas pode ser um problema que você está enfrentando.

No Chrome, a cor da fonte da caixa de seleção era preta. Por algum motivo no Firefox, a caixa de seleção herdou a cor da fonte do contêiner, que era branco. Depois de adicionar uma regra CSS para forçar a cor da fonte da caixa de seleção a ser preta, o valor definido foi exibido corretamente.


0

Nem autocomplete="off"colocá-lo dentro de uma formfunciona para mim.

O que funcionou foi usar apenas o atributo selecionado sem nenhum "valor" como este:

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

então ele renderiza <option selected>...</option>, ou apenas<option>...</option>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.