複数選択できるHTMLselect要素があります。オプションにajaxリクエストの結果を入力しています。オプションにカスタム属性を追加しています。ある例では、別のajaxリクエストが完了したときに、複数選択された値を更新したいと思います。この選択を行うには、次のjavascriptメソッドがあります。
// select = id of the select control.
// selected = list of json objects with an id representing those that are selected.
updateSelection = function( select, selected ) {
$('#'+select+' option').each( function() {
var item = $(this);
$.each(selected, function() {
item.removeAttr( "selected" );
if ( this.id === parseInt(item.attr("optionId"), 10 )) {
alert( "selecting " + item.text());
item.attr("selected", true );
}
});
});
};
メソッドが実行される前のHTMLは次のようになります。
<select id="putPlatforms" multiple="multiple">
<option optionid="1" optionversion="1">PC</option>
<option optionid="3" optionversion="1">Xbox 360</option>
</select>
「PC」のみが選択されている場合、選択が行われ、UIに反映されます。「Xbox360」のみが選択されている場合も同様です。両方のオプションを選択する必要がある場合は、両方が選択されるというアラートが表示されますが、Xbox360のみが選択されています。