Question

I have written a script which select and deselect all options of multiple select tag on my html page. But in Google Chrome when I do deselect it still is viewed as selected, only when we put focus on select box, selection will disappear.

Is there any workaround to fix it?

Here is an example of the bug

Answer 1

Use .prop() ^[docs] instead to directly set the property of the DOM element:

$('#select_all').click(function(){
    $('#list option').prop('selected', true);
    return false;
});

$('#deselect_all').click(function(){
    $('#list option').prop('selected', false);
    return false;
});

DEMO