Blazor-＜select＞

ops/2025/2/11 10:26:26/

今天我们来说说<select>标签的用法，我们还是从一个示例代码开始

@page "/demoPage"
@rendermode InteractiveAuto
@inject ILogger<InjectPage> logger;
<h3>demoPage</h3>
<select multiple>@foreach (var item in list){<option>@item</option>}
</select>
@code {List<string> list = new List<string>() { "张三", "李四", "王五", "赵六" };
}

上述代码中我们绑定了list，用于显示列表，并使用了multiple对列表进行了展开，我们看看效果
在这里插入图片描述

可以看到数据都被展示出来了，下来我们看看其他的相关用法

@bind

在<select>中的绑定，不是绑定显示的数据，而是绑定显示的数据，下面我们还是使用上面的示例，绑定一下选中的数据，我们让默认选中“张三”和“李四”

@page "/demoPage"
@rendermode InteractiveAuto
@inject ILogger<InjectPage> logger;
<h3>demoPage</h3>
<select multiple @bind=selectedList>@foreach (var item in list){<option>@item</option>}
</select>
@code {List<string> list = new List<string>() { "张三", "李四", "王五", "赵六" };string[] selectedList = new string[] { "李四", "张三" };
}

通过上述代码中的绑定，我们在绑定的数组中添加了“李四”和“张三”，让“李四”和“张三”默认被选中，我们运行下试试效果
在这里插入图片描述

运行的效果和我们预期的是相符合的。

获取选中项

有时候我们可能有需求，需要获取选中的项，我们可以通过绑定@onchange方法来获取选中的项。

@page "/demoPage"
@rendermode InteractiveAuto
@inject ILogger<InjectPage> logger;
<h3>demoPage</h3>
<select multiple @onchange="OnChange">@foreach (var item in list){<option>@item</option>}
</select><p>当前选中项</p>
@foreach (var item in selectedList){<p>@item</p>
}@code {List<string> selectedList = new();public void OnChange(ChangeEventArgs e){if(e.Value is not null){selectedList = ((string[])e.Value).ToList();}}List<string> list = new List<string>() { "张三", "李四", "王五", "赵六" };
}