我的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中是否存在某种与此元素相关的错误,或者是否存在我遗漏的内容?
通过查看控制台,我可以看到它是如何取消所选属性的,它只是没有刷新元素。
答案 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();
});
它检查刚刚选择的内容,然后取消选择所有内容并重新选择所需的内容。 :)