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

当使用.removeAttr（“选定”）从multiselect中的选项中删除“selected”属性时，这些选项不会立即在Chrome中重新绘制为未选定。使用Chrome Developer工具监视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>

1.
2.
3.
4.
5.

---

这在jQuery 1.7.1和Chrome 16中。请尝试如下刷新元素的宽度：

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

---

在其上设置

焦点

，并立即调用

模糊

使其工作。试试这个

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

---

谢谢，这确实有效。我仍然很想理解为什么需要重新绘制元素。