Обновить Multiselect после удаления выбранного атрибута с помощью jQuery

Question

При удалении атрибута «selected» из параметров в множественном выборе с помощью .removeAttr («selected») параметры не сразу перерисовываются в Chrome как невыбранные.Мониторинг DOM с использованием Chrome Developer Tools показывает, что выбранный атрибут удаляется из 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();
});

Демо

Answer 2

Попробуйте обновить ширину элемента следующим образом:

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

jsFiddle