Multiple Select bug in Firefox

Question

I have a specific problem with multiple select values.

<form id="form-to-submit">
    <select multiple="true" name="sel" id="sel">
        <option id="0_1" value="0">Bacon</option>
        <option value="1">Pickles</option>
        <option id="0_3" value="2">Mushrooms</option>
        <option value="3">Cheese</option>        
    </select>
</form>
<button id="setValues">Set Values</button>

JS:
$("#setValues").click(function() {
    $("#sel").find("option").removeAttr("selected");
    $("#0_1").attr("selected","selected");
    $("#0_3").attr("selected","selected");

});

I've crated a JSfiddle which shows the problem:

When you click on Set Values button, it clears all options selected attribute, then sets it to selected for first and third options.

PROBLEM: In Firefox after second click on Set Values button, it clears the selection values. In other browsers it works well.

Any ideas?

score 4 · Accepted Answer · edited May 23 '17 at 11:57

Instant solution!!!!

$("#0_1").prop("selected", true);
$("#0_3").prop("selected", true);

Some explanation ?!!?

So, what's the difference between .attr() and .prop()!!!

Basically, properties are of DOM elements whereas attributes are for HTML elements which are later parsed into DOM tree using browsers parser.

Because of some inconsistent behaviour amongst different browsers it's preferred to use .prop() instead of .attr().

Quoted from jQuery API Documentation :

"To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method."

There are lot's of reasons you want to switch to .prop(). Here's a great thread that helped me to dive into more of .attr() and .prop() ;)

.prop() vs .attr()

This worked for me. attr() works smooth in chrome but fails on IE Edge & firefox. .prop() did the trick. Thanks a lot — Suraj Air, May 23 '17 at 17:40

score 3 · Answer 2 · answered Nov 09 '14 at 18:18

Two things:

To set the selected state, use prop, not attr.
In CSS selectors, and id cannot start with a digit, so #0_1 and #0_3 are invalid selectors. (They happen to work because of an optimization in jQuery where something that's obviously an id selector on its own ends up going to getElementById instead of a CSS selector parser like querySelectorAll or Sizzle's own parser, but it's not something you should rely on. For instance, if you had an element with id="123" and an element inside it with class foo, $("#123 foo") would throw an error.)

Fixes:

<form id="form-to-submit">
    <select multiple="true" name="sel" id="sel">
        <option id="x0_1" value="0">Bacon</option>
        <option value="1">Pickles</option>
        <option id="x0_3" value="2">Mushrooms</option>
        <option value="3">Cheese</option>        
    </select>
</form>
<button id="setValues">Set Values</button>

$("#setValues").click(function() {
    $("#sel").find("option").removeAttr("selected");
    $("#x0_1").prop("selected",true);
    $("#x0_3").prop("selected",true);

});

Updated fiddle

Multiple Select bug in Firefox

2 Answers2