jQueryを使用して選択した属性を削除した後にマルチ選択をリフレッシュ

Question

.removeAttr（ "selected"）を使用して複数選択のオプションから「選択済み」属性を削除すると、オプションはChromeで直ちに再選択されません。 Chrome Developer Toolsを使用してDOMを監視すると、選択した属性がDOMから削除されますが、ページ上の別の項目にフォーカスが当てられるまでは選択肢が選択されているように見えます。

プログラムで再描画するオプションを取得する方法はありますか？私は "変更"や他のイベントを誘発しましたが、ユーザーが適切な場所にカーソルを置いたりクリックしたりするだけでは機能しないようです。他の何かが注目を集めるまで、ブラウザは要素を再描画するのを忘れているようです。

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

とマークアップ：

はここに関連するコードです。これは、jQueryの1.7.1とChromeである

<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> 

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