如何从引导程序多选下拉列表中获取选定的值

Question

我在blazor客户端应用程序中引用bootstrap multiselect。

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

我在我的剃刀页面中定义了一个选择控件，如下所示，它使用IJSRuntime与jQuery通信。我可以看到具有正确值的多选下拉列表，并且在选择时可以看到逗号分隔的值列表。我如何在剃刀页面中获得这个值列表，或者有没有方法将结果绑定到剃刀页面中的变量？谢谢你的建议。

<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

这里有一个没有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; }
}
}