Question

使用.removeAttr（“selected”）从多选中的选项中删除“selected”属性时，Chrome中的选项不会立即重新绘制为未选中。使用Chrome开发者工具监控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中。

Answer 1

在其上设置focus，然后立即致电blur。试试这个。

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

<强> Demo

Answer 2

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

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

jsFiddle

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

2 个答案: