Support binding to <select multiple>, getting/setting the selection as an array

[dlr1]

With the following code

 <select name="cars" multiple onchange="@SelectionChanged">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>
 void SelectionChanged(UIChangeEventArgs e)
        {
            Console.WriteLine(e.Value);
        }

Holding down the ctrl key, if you select 'volvo' first and then any other value, e.value is always 'volvo'. It basically returns the top selected item in the list.

[Andrzej-W]

I have checked #805 and it looks that in simple binding scenario it doesn't work either. The question is: what data type should we use to bind to "select multiple" and what should be returned in e.Value? Array of strings or simple string (multiple values with separators)?

[SteveSandersonMS]

Great point to raise. We don't have any specific API in place for this scenario.

I guess a reasonable design would be binding to a string[], but that's not yet implemented.

We can add it to the backlog.

[pjmagee]

Just to be clear, Blazor doesn't currently support selects that are defined as multi select? If it doesn't, is there a simple way around it?

[mikewodarczyk]

@pjmagee There is a workaround. I used a javascript interop call to get the list of selected items from the list. To set the initial selections, you can set the <select value=@selections> where selections is a List<string>.

   <select ref="sel" multiple="multiple" onchange=@SelectionChanged value=@selections>
         @foreach (string s in MyStringList)
         {
            <option value="@s">@s</option>
         }
     </select>

@functions {

[Parameter]
private List<string> FilteredStringList { get; set; } = new List<string>();
private List<string> selections = new List<string>();  

public async Task<List<string>> GetAllSelections()
{
    return (await JSRuntime.Current.InvokeAsync<List<string>>("getSelectedValues", sel)).ToList();
}

 private async Task SelectionChanged(UIChangeEventArgs evt)
 {
    List<string> localSelections = await GetAllSelections();
    // do something with localSelections.  or wait for some other
    //  event like a button and call GetAllSelections() to get the list later.
  }
}

in the html page include the getSelectedValues function. The function below works, but
I know there are faster ways of getting the list.

  window.getSelectedValues = function(sel) {
    var results = [];
    var i;
    for (i = 0; i < sel.options.length; i++) {
        if (sel.options[i].selected) {
            results[results.length] = sel.options[i].value;
        }
    }
    return results;
};