Chrome not refreshing multi select element

Question

I have a very simple element in my HTML of: ``` ``` And I have a bit of JQuery which magically allows for single click mutliple selections: ``` $('select[multiple] option').click(function(e){ var self = $(this); e.preventDefault(); if (self.attr('selected')) self.removeAttr('selected'); else self.attr('selected', 'selected'); }); ``` And this works just dandy on Firefox but not Chrome. It technically works on Chrome but it does not refresh the element. As an example I select two options and then de-select them, it still shows them as selected. However, when I select a new option in the element it will now refresh and de-select the two elements correctly that I un-selected earlier. It will also refresh the element if I click o…

Accepted Answer

I've done some research for that subject as your problem was very interesting. It seems that its better to use prop() instead of attr(). http://ejohn.org/blog/jquery-16-and-attr/

Also this post maybe some of use for you : jQuery, Chrome and "selected" attribute anomalies

```
    $('select[multiple] option').mousedown(function(e){
   var self = $(this);
   e.preventDefault();
console.log(self.attr('selected'));

if ( self.is(':selected'))
        self.prop('selected', false);
   else
        self.prop('selected', 'selected');

});
```

Here is working example that i've tried under chrome: http://jsfiddle.net/7sZUj/ Hope that will help you.

Chrome not refreshing multi select element

Solution

Problem

Related problems