Firefox ignores option selected="selected"

Question

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

i face this problem now and i fix it using `$('option:selected').each(function(){ $(this).prop('selected',true); });` — plonknimbuzz, Jul 15 '18 at 10:00
I noticed that this only happens to select elements that lack a name attribute — Tlacaelel Ramon Luis, Nov 05 '18 at 19:07

score 348 · Answer 1 · edited Aug 19 '20 at 17:21

348

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

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

edited Aug 19 '20 at 17:21

Leandro Bardelli

10,561
15
79
116

answered Apr 10 '12 at 20:32

Marco Demaio

33,578
33
128
159

7

This is my preference (thanks so much Marco and monkey-wrench, saved a few clumps of my hair there). And you will also have to add it to every with a "value" or "checked" attribute, and any with content. – Swanny Jan 29 '13 at 00:08
1

this is not a w3c valid – Jose De Gouveia Sep 18 '15 at 14:48
When doing this, and it works in Firefox, it generates the following validation error: `Attribute autocomplete not allowed on element select at this point.` – Lee Oct 05 '15 at 08:55
2

Did not work for me in Firefox Quantum 60.0.2 64-bit. https://stackoverflow.com/a/12650918/470749 worked. – Ryan Jun 10 '18 at 13:42
2

I added `autocomplete="off"` directly to my
tag instead of adding to every field in the form and it worked just fine.
– Andrés Damesón Nov 02 '21 at 18:03
using firefox 93.0 and this trick is still working. – H Aßdøµ Apr 01 '22 at 12:57
Why is Firefox still doing this in 2022? When does an – Michael Koper Sep 08 '22 at 07:36

score 91 · Answer 2 · answered Sep 29 '12 at 07:44

91

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.

answered Sep 29 '12 at 07:44

user1707970

911
6
3

4

BAM! That fixed it where autocomplete="off" did not. – little_birdie Nov 24 '15 at 01:14
Spent an hour scratching my head with Firefox 78.0.2. Didn't need a name on my form but giving it one provided relief. – betakilo Jul 18 '20 at 19:55

score 12 · Answer 3 · answered Nov 09 '11 at 02:02

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!

This is the correct answer. The answers saying to use "autocomplete" on a select element are wrong because "autocomplete" is NOT a valid attribute for a select field according to W3 and will cause "Attribute autocomplete not allowed on element select at this point." errors on validation. — Scott, Oct 22 '15 at 18:41

score 11 · Answer 4 · edited May 23 '17 at 12:02

11

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

edited May 23 '17 at 12:02

Community

1
1

answered Apr 19 '14 at 10:44

hammygoonan

2,125
2
21
36

1

seems so that it is a firefox feature. – Oleksii Kyslytsyn Sep 22 '16 at 10:29
This was the correct answer for me, still the same behaviour in 2021 – Sebj Sep 06 '21 at 09:33

score 7 · Accepted Answer · answered Jan 28 '11 at 18:47

7

AFAIK, this behaviour is hard-coded into Firefox.

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

answered Jan 28 '11 at 18:47

Pekka

442,112
142
972
1,088

1

Is there an easy was to do this for all elements within the form? – monkey-wrench Jan 28 '11 at 18:52
@monkey using jQuery, it should be something like `$(":input").val(this[0].defaultValue);` (untested); in normal JS, walk though each `document.getElementsByTagname("select")` – Pekka Jan 28 '11 at 19:11
Although maybe not the ideal solution, this works.. you have to do a check on getAttribute("selected") – monkey-wrench Jan 28 '11 at 19:43
8

FYI - There's a much better answer below by Marco Demaio – jonlink Dec 21 '14 at 00:35

Arash Hatami · Answer 6 · 2019-08-27T22:01:58.307

5

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

edited Aug 27 '19 at 22:01

answered Aug 12 '17 at 16:59

Arash Hatami

5,297
5
39
59

score 3 · Answer 7 · edited Dec 17 '13 at 13:24

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!

score 3 · Answer 8 · edited Aug 19 '20 at 17:21

3

Try giving the dropdown a name.

edited Aug 19 '20 at 17:21

Leandro Bardelli

10,561
15
79
116

answered Oct 13 '14 at 19:54

FourtyTwo

734
8
19

score 3 · Answer 9 · answered Nov 06 '14 at 21:25

3

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>

answered Nov 06 '14 at 21:25

Muhammad Tahir

2,351
29
25

score 3 · Answer 10 · answered Mar 12 '15 at 12:21

3

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

answered Mar 12 '15 at 12:21

Zaheer Babar

1,636
1
15
17

Using `.prop('selected', true);` or `.prop('selected', false);` (jQuery) to enable/disable works for both Firefox and Chrome. – JimB Jan 22 '16 at 16:19

score 2 · Answer 11 · edited Aug 19 '20 at 17:23

2

With the name is better

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

The select will take the selected attribute

edited Aug 19 '20 at 17:23

Leandro Bardelli

10,561
15
79
116

answered Apr 26 '16 at 15:09

snk

21
1

score 2 · Answer 12 · answered Jan 28 '11 at 21:47

2

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

answered Jan 28 '11 at 21:47

Neil

54,642
8
60
72

score 1 · Answer 13 · edited Aug 19 '20 at 17:23

1

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

edited Aug 19 '20 at 17:23

Leandro Bardelli

10,561
15
79
116

answered Feb 10 '15 at 10:25

boxed

3,895
2
24
26

score 1 · Answer 14 · answered Jul 08 '15 at 10:14

1

autocomplete wasn't working for me either.

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

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

answered Jul 08 '15 at 10:14

Danny van der Knaap

19
6

score 1 · Answer 15 · edited Apr 18 '17 at 16:45

1

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

edited Apr 18 '17 at 16:45

TylerH

20,799
66
75
101

answered Nov 05 '15 at 06:24

Chinmaya

11
1

score 1 · Answer 16 · answered Nov 16 '16 at 17:00

1

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

answered Nov 16 '16 at 17:00

Shapi

5,493
4
28
39

score 1 · Answer 17 · answered Jan 28 '11 at 18:53

1

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.

answered Jan 28 '11 at 18:53

Rod

2,046
2
20
24

This is true, however doesn't seem to solve my problem. I still need a work around since my onchange event doesn't fire when firefox restores any changes to the form when I do a refresh. – monkey-wrench Jan 28 '11 at 18:57

score 0 · Answer 18 · answered Jan 16 '15 at 10:01

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

score 0 · Answer 19 · answered Sep 21 '16 at 18:26

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.

score 0 · Answer 20 · answered Dec 14 '17 at 14:26

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>

Firefox ignores option selected="selected"

20 Answers20

Linked