CODEWITHSUNDEEP
razorblazorblazor-client-sidebootstrap-multiselect
Jyina
Jyina

Reputation: 2902

How to get selected values from bootstrap multi select dropdown?

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

Upvotes: 0

Views: 2028

Answers (1)

Marc Schluper
Marc Schluper

Reputation: 99

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

Upvotes: 0

Related Questions