Blazor-<select>

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

csharp 复制代码
@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>中的绑定,不是绑定显示的数据,而是绑定显示的数据,下面我们还是使用上面的示例,绑定一下选中的数据,我们让默认选中"张三"和"李四"

csharp 复制代码
@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方法来获取选中的项。

csharp 复制代码
@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>() { "张三", "李四", "王五", "赵六" };
}

我们通过以上代码,做了一个示例,触发事件显示选中的项,我们来试试效果怎么样

运行的效果是符合我们的预期的,如果大家有类似的需求,可以参考参考以上的写法

相关推荐
宝桥南山几秒前
.NET - .NET Aspire的Command-Line和GitHub Copilot
microsoft·微软·c#·asp.net·.net·.netcore
心.c10 分钟前
深拷贝浅拷贝
开发语言·前端·javascript·ecmascript
曦樂~12 分钟前
【Qt】启动新窗口--C/S传输信息
开发语言·qt
源代码•宸13 分钟前
Qt6 学习——一个Qt桌面应用程序
开发语言·c++·经验分享·qt·学习·软件构建·windeployqt
寻找华年的锦瑟14 分钟前
Qt-UDP
开发语言·qt·udp
橘颂TA16 分钟前
【QSS】软件界面的美工操作——Qt 界面优化
开发语言·qt·c/c++·界面设计
Evand J40 分钟前
【MATLAB例程】二维环境定位,GDOP和CRLB的计算,锚点数=4的情况(附代码下载链接)
开发语言·matlab·定位·toa·crlb·gdop
郝学胜-神的一滴1 小时前
使用现代C++构建高效日志系统的分步指南
服务器·开发语言·c++·程序人生·个人开发
你不是我我1 小时前
【Java 开发日记】我们来讲一讲阻塞队列及其应用
java·开发语言
互联网中的一颗神经元1 小时前
小白python入门 - 9. Python 列表2 ——从基础操作到高级应用
java·开发语言·python