4

我的 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/

4

2 回答 2

3

我已经针对该主题进行了一些研究，因为您的问题非常有趣。似乎使用 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/ 希望对您有所帮助。

于 2013-03-21T13:08:34.653 回答
0

好的，既然 IE 不在桌面上，试试这个：http: //jsfiddle.net/Udf5c/5/

$('select[multiple] option').mousedown(function(e){

    var sel = $(this).parent('select');
    var opt = $(this);

    var pushTarget = false;

    var selectedOptions = sel.find('option:selected');

    if (opt.attr('selected')) {
        selectedOptions = 
            $($.grep(selectedOptions, function(val) {
                return $(val).val() != opt.val();
            }));

    } else {
        selectedOptions.push(opt);
    }

    sel.children().each(function() {
        $(this).attr('selected', false); 
    });

    selectedOptions.each(function() {
        var o = sel.find('option[value="' + $(this).val() + '"]');
        o.attr('selected', 'selected');
    });

   e.preventDefault();
});

它检查刚刚选择的内容，然后取消选择所有内容并重新选择您想要的内容。:)

于 2013-03-21T12:33:22.320 回答