Firefox ignores option selected=“selected”

问题:

If you change a dropdown and refresh the page, Firefox seems to ignore the selected attribute.

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

It will in fact select the option you had previously selected (before the refresh). This ends up being a problem for me since there is an event triggered on the dropdown which changes other things. Is there a way to make firefox stop this behavior (other than firing another event when the page loads)?

回答1:

AFAIK, this behaviour is hard-coded into Firefox.

You could try setting each form element to its defaultValue on page load.

回答2:

Add autocomplete="off" HTML attribute to every select tag. (source: https://stackoverflow.com/a/8258154/260080)

This fixes the ODD behavior in FireFox.

回答3:

In firefox, I've notice that the "selected" attribute will not work unless you place the select inside a form, where the form has a name attribute.

回答4:

Just had the same issue, believe me it's been more than 10 hours struggling with this stupid firefox behavior, i have 7 dropdowns, each of them will trigger an event and fill in 24 hidden inputs, so you can imagine having the right option selected with 24 wrong input values!!! the solution i finally found is to reset the form with Javascript adding this line of code:

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

PS: the inputs have the values pulled from a database, so resetting the form does not empty any value but in a way tells firefox to go back the hell to selected=selected option!

回答5:

It's just Firefox remembering your previous selection when refreshing. Try a hard refresh instead.

Also, same issue over here: https://stackoverflow.com/a/1505693/1069232

Also see here: https://bugzilla.mozilla.org/show_bug.cgi?id=274795

回答6:

I'm using FF 25.0.1

It ignore selected="" and selected="selected".

But if I simply try selected the option is selected.

Strange (non conformant) behaviour. I know selected is valid HTML5 and it's the shortest form, but I usually write code that also validates as wellformed XML, so that I can use any XML validation tool to check my results in a very strict way (and data exchange is very easy...)

According to W3C, these variants should be valid on boolean attributes:

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

I prefer the first one, as is it nearly as short as the last (not xml conformant) variant but should validate as both XHTML5 AND HTML5. So I hope, Mozilla will fix it!

回答7:

use .prop() instead of .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' );

回答8:

You could call .reset() on the form before refreshing the page.

回答9:

With the name is better =>>

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

The select will take the selected attribute

回答10:

It's maybe a bug in mozilla but try giving the dropdown a name.

回答11:

enclose select in form attribute and it will work.

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

and

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

回答12:

autocomplete wasn't working for me either.

This is the javscript fix written in jquery that i use:

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

回答13:

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

In this case this worked both for Chrome and Firefox.

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

I was using .attr() instead of .prop()

回答14:

To show the first item of the dropdown, use ProjectName.ClearSelection();

Put lines in your design page to work on all browser And also put this on code behind on page load.

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

回答15:

Try to disable autocomplete attribute of select input ... sometimes browser ignore select because of that

回答16:

If you change the select and refresh the page firefox will restore your changes on the form, that's why you feel like the select isn't working. Instead of refreshing, try opening the link on a new tab.

回答17:

This is my solution:

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

I just put that at the top of the page (with appropriate id set), and it works for me. Replacing the getElementById with a loop over all selects on the page, I leave as an exercise for the reader ;).

回答18:

For me none of the solutions above worked. I had to explicitly set the selection if none was set:

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

I wish firefox would fix this :(

回答19:

At work, I just fixed a bug where the select box option displayed properly in Chrome but not in Firefox, on the same web page. It turned out to be something completely different than the problems above, but could possibly be a problem you are experiencing.

In Chrome, the select box font-color was black. For some reason in Firefox, the select box inherited the font-color from the container, which was white. Once I added a CSS rule to force that select box font-color to be black, the value set was properly displayed.

回答20:

Neither autocomplete="off" or placing it inside a form works for me.

What worked was to only use the attribute selected with no "value" like this:

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

so either it renders <option selected>...</option>, or just <option>...</option>