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)?

Add autocomplete="off" HTML attribute to every select tag.

(source: https://stackoverflow.com/a/8258154/260080)

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.

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!

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

AFAIK, this behaviour is hard-coded into Firefox.

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

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

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!

Try giving the dropdown a name.

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>

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' );

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

With the name is better

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

The select will take the selected attribute

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.

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

autocomplete wasn't working for me either.

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

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

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

<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()

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 ;).

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.

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>