How to get selected values from bootstrap multi select dropdown? - razor

Question

I am referencing bootstrap multiselect in my blazor client application.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
I have a select control defined as below in my razor page which communicates with jQuery using IJSRuntime. I can see multi select dropdown with the right values and I see a comma separated list of values upon selection. How can I get this list of values in the razor page or is there a way to bind the result to a variable in the razor page? Thanks for any suggestions.
<select class="multipleselect" multiple #ref="selectMultiple">
#if (Days != null)
{
foreach (var d in Days)
{
<option value="#d.Name">#d.Code</option>
}
}
</select>
#inject IJSRuntime JsRuntime;
#code{
private ElementReference selectMultiple;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await selectMultiple.LoadMultiSelect(JsRuntime);
}
}
public static async Task LoadMultiSelect(this ElementReference elementRef, IJSRuntime jsRuntime)
{
await jsRuntime.InvokeAsync<string>("testscripts.initMultiSelect", elementRef);
}
(function (window) {
window.testscripts = {
initMultiSelect: () => {
console.log('init multi select');
$('.multipleselect').multiselect();
}
})(window);

Answer 1

Here is a solution without jQuery:
<div class="mb-3">
<label for="mslct" class="form-label">Things: #selection.Count</label>
<select id="mslct" class="form-select" #onchange="OnChangeSelection" multiple style="width:auto;">
<option value="0"></option>
#if (Options != null)
{
foreach (var option in Options)
{
<option selected="#(selection.Contains(option.Id))" value="#option.Id">#option.Name</option>
}
}
</select>
</div>
#code {
private List<int> selection = new();
[Parameter]
public List<Thing> Options { get; set; } = new();
[Parameter]
public List<Thing> Value { get; set; } = new();
[Parameter]
public EventCallback<List<Thing>> OnChange { get; set; }
protected override void OnInitialized()
{
selection = Value.Select(o => o.Id).ToList();
}
private async void OnChangeSelection(ChangeEventArgs e)
{
selection = (e.Value as string[])?.Select(x => int.Parse(x)).ToList() ?? new();
await OnChange.InvokeAsync(Options.Where(o => selection.Contains(o.Id)).ToList());
}
public class Thing
{
public int Id { get; set; }
public string? Name { get; set; }
}
}