jquery - Chrome 不刷新多选元素

Question

我的 HTML 中有一个非常简单的元素:

<select multiple="multiple" size="19" name="Title[book_types_array][]" id="Title_book_types_array">
    <option value="0">None Selected</option>
    <option value="1" selected="selected">Textbook School</option>
    <option value="2">Textbook Undergraduate</option>
</select>

我有一点 JQuery，它神奇地允许单击多个选择:

$('select[multiple] option').click(function(e){
   var self = $(this);
   e.preventDefault();
   if (self.attr('selected'))
       self.removeAttr('selected');
   else
       self.attr('selected', 'selected');
});

这在 Firefox 上非常有效，但在 Chrome 上却不行。

它在技术上适用于 Chrome，但不会刷新元素。例如，我选择了两个选项，然后取消选择它们，它仍将它们显示为已选中。但是，当我在元素中选择一个新选项时，它现在将刷新并正确取消选择我之前未选择的两个元素。如果我点击另一个窗口然后再次返回，它也会刷新元素。

这是 Chrome 中带有此元素的某种错误还是我遗漏了什么？

编辑

通过查看控制台，我可以看到它是如何取消所选属性的，它只是没有刷新元素。

添加示例:http://jsfiddle.net/Udf5c/

Answer 1

我已经针对该主题进行了一些研究，因为您的问题非常有趣。似乎最好使用 prop() 而不是 attr()。 http://ejohn.org/blog/jquery-16-and-attr/

此外，这篇文章可能对您有用: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');

});

这是我在 chrome 下尝试过的工作示例:http://jsfiddle.net/7sZUj/希望对您有所帮助。