Question

When removing the “selected” attribute from options in a multiselect using .removeAttr(“selected”), the options are not immediately redrawn in Chrome as being unselected. Monitoring the DOM using Chrome Developer Tools shows that the selected attribute is removed from the DOM, but the options still appear to be selected until another item on the page is given focus.

Is there a way to get the options to redraw programmatically? I’ve triggering “change” and some other events, but nothing seems to work besides have the user hover or click in an appropriate place. It seems as if the browser forgets to redraw the elements until something else grabs its attention.

Here’s the relevant code:

$("#selectAll").click(function () {
    $("#x option").attr("selected", "selected");
});
$("#deselectAll").click(function () {
    $("#x option").removeAttr("selected");
});

And markup:

<a id="selectAll" href="javascript:void(0)">Select All</a>
<a id="deselectAll" href="javascript:void(0)">Deselect All</a>

<select multiple="multiple" size="5" style="height: 6em;" name="x" id="x">
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
     <option>5</option>
 </select>

This is in jQuery 1.7.1 and Chrome 16.

Answer 1

Set the focus on it and immediately call blur it works. Try this.

$("#selectAll").click(function () {
    $("#x option").attr("selected", "selected");
});
$("#deselectAll").click(function () {
    $("#x").find("option")
    .removeAttr("selected")
    .end().focus().blur();
});

Demo