通过jQuery删除选定属性后刷新多选

Refresh Multiselect after removing selected attribute via jQuery

本文关键字：刷新 属性 jQuery 删除 通过      更新时间：2023-09-26

使用.removeAttr（"selected"）从多选中的选项中删除"selected"属性时，Chrome中的选项不会立即重绘为未选中。使用Chrome Developer Tools监控DOM显示所选属性已从DOM中删除，但在页面上的另一个项目获得焦点之前，选项似乎仍处于选中状态。

有没有一种方法可以通过编程重新绘制选项？我已经触发了"更改"和其他一些事件，但除了让用户悬停或单击适当的位置之外，似乎什么都不起作用。浏览器似乎忘记了重新绘制元素，直到其他东西引起了它的注意。

这是相关代码：

$("#selectAll").click(function () {
    $("#x option").attr("selected", "selected");
});
$("#deselectAll").click(function () {
    $("#x option").removeAttr("selected");
});

和标记：

<a id="selectAll" href="javascript:void(0)">Select All</a>
<a id="deselectAll" href="javascript:void(0)">Deselect All</a>
<select multiple="multiple" size="5" style="height: 6em;" name="x" id="x">
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
     <option>5</option>
 </select>

这是在jQuery 1.7.1和Chrome 16中。

在其上设置focus并立即调用blur即可工作。试试这个。

$("#selectAll").click(function () {
    $("#x option").attr("selected", "selected");
});
$("#deselectAll").click(function () {
    $("#x").find("option")
    .removeAttr("selected")
    .end().focus().blur();
});

演示

尝试刷新元素的宽度，如下所示：

$("#selectAll").click(function () {
    $("#x option").attr("selected", "selected");
});
$("#deselectAll").click(function () {
    $("#x option").removeAttr("selected").width($("#x option").width());
});

jsFiddle

相关文章：