Chrome无法刷新多选元素

时间:2013-03-21 12:18:23

标签: jquery html google-chrome

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

2 个答案:

答案 0 :(得分: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/ 希望能帮到你。

答案 1 :(得分: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();
});

它检查刚刚选择的内容,然后取消选择所有内容并重新选择所需的内容。 :)