Firefox ignores the selected option = "selected"

Question

If you change the drop-down list and refresh the page, Firefox seems to ignore the selected attribute.

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

In fact, the option that you previously selected (before upgrading) will be selected. This becomes a problem for me, as an event occurs in the drop-down list that changes other things. Is there a way to make firefox stop this behavior (except that it fires another event when the page loads)?

Answer 1

AFAIK, this behavior is hard-coded in Firefox.

You can try to configure each form element on defaultValue to load the page.

Answer 2

Add an autocomplete="off" HTML attribute for each selected tag. (source: https://stackoverflow.com/a/312618/ )

This fixes the ODD behavior in FireFox.

Answer 3

In firefox, I noticed that the "selected" attribute will not work unless you place the selection inside the form where the form has a name attribute.

Answer 4

It’s just that I had the same problem, believe me that more than 10 hours have passed with this stupid behavior of Firefox, I have 7 drop-down menus, each of which will trigger an event and fill 24 hidden inputs, so you can imagine the option is 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 values ​​pulled out of the database, so resetting the form will not allow any value, but in a sense tells firefox to return to the selected = selected option!

Answer 5

It's just Firefox that remembers your previous choice when refreshing. Instead, try hard update.

Also, the same problem is here: https://stackoverflow.com/a/3166/

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

Answer 6

I am using FF 25.0.1

It ignores selected="" and selected="selected" .

But if I just try selected , the option will be selected.

Strange (inappropriate) behavior. I know that selected is valid HTML5 and this is the shortest form, but I usually write code that also validates as well-formed XML, so I can use any XML validation tool to validate my results in a very rigorous way (and sharing data is very easily...)

According to the W3C, these options must be valid for logical attributes:

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

I prefer the first one, as it is almost as short as the last (and not xml-compatible) option, but should be checked both by XHTML5 and HTML5. So I hope Mozilla fix it!

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

Answer 8

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

Answer 9

With a better name = →

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

When selected, select the selected attribute.

Answer 10

This may be a bug in mozilla, but try providing a drop-down name.

Answer 11

wrap the selection attribute in the 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> 

Answer 12

autocomplete didn't work for me either.

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

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

Answer 13

To display the first item in a drop-down list, use ProjectName.ClearSelection();

Place the lines on the design page on all browsers, and also place the code on the page on the page.

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

Answer 14

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

In this case, this worked for both Chrome and Firefox.

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

I used .attr() instead of .prop()

Answer 15

try disabling the autocomplete attribute of the selected input ... sometimes the browser ignores select because of this

Answer 16

Neither for autocomplete="off" , nor for placement inside the form does not work.

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

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

either it displays <option selected>...</option> , or just <option>...</option>

Answer 17

If you change the selection and refresh the page, then firefox will restore your changes to the form, so you feel that the selection is not working. Instead of updating, try opening the link in a new tab.

Answer 18

This is my decision:

 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 this at the top of the page (with the appropriate set of identifiers) and it works for me. Replacing getElementById with a loop over all the selections on the page, I leave it as an exercise for the reader;).

Answer 19

For me, none of the above solutions worked. I should have explicitly set the choice if none were installed:

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

I want firefox to fix this :(

Answer 20

At work, I just fixed a bug in which the window selection option displays correctly in Chrome, but not in Firefox, on the same web page. This turned out to be something completely different than the problems above, but it may be the problem you are facing.

In Chrome, the font color of the selection was black. For some reason, in Firefox, the selection box inherited the font color from the container, which was white. As soon as I added a CSS rule to force the black font to choose the font color, the value was correctly displayed.