Question

I have an HTML select element that allows multiple selection. I am populating the options with the results of an ajax request. I am adding custom attributes to the options. In one instance, when another ajax request completes, I would like to update the multi-selected values. I have the following javascript method to do this selection:

// 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 );
            }
        });
    });
};

The HTML before the method is run looks like this:

<select id="putPlatforms" multiple="multiple">
    <option optionid="1" optionversion="1">PC</option>
    <option optionid="3" optionversion="1">Xbox 360</option>
</select>

In the case where only ‘PC’ is selected then the selection is made and reflected in the UI. The same if only ‘Xbox 360’ is selected. If BOTH options should be selected I see the alert stating that both will be selected, but only Xbox 360 is selected.

Answer 1

Using the answer to this question I was able to make it work. I changed my function to the following:

// 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').attr('selected', false );
    $.each(selected, function() {
        $('#'+select+' option[optionid='+this.id+']').attr('selected', true );
    });
};