Blazor Server应用中如何获取下拉框选中项的原始索引值

有两种简单可行的实现方式：

方法一：给每个Option设置索引值作为Value #

直接修改下拉框代码，为每个<option>标签添加对应索引的value属性，选中后就能直接拿到索引值：

<td class="td_DiagBuff_data" style="max-width: 150px">
<select @bind="selectedTypeIndex" @onchange="@(e => func_MD_type(e, index))">
    <option value="0">select</option>
    <option value="1">opel</option>
    <option value="2">ford</option>
    <option value="3">subaru</option>
    <option value="4">renault</option>
    <option value="5">mercedes</option>    
</select>
</td>

在组件代码段中定义绑定变量并处理索引：

private int selectedTypeIndex; // 自动同步选中的索引

private void func_MD_type(ChangeEventArgs e, int index)
{
    // 方式1：直接用绑定好的selectedTypeIndex变量
    // 方式2：从事件参数中解析索引
    int selectedIndex = int.Parse(e.Value.ToString());
}

这种方式最直接，无需额外逻辑就能获取索引。

方法二：通过选项列表匹配索引 #

如果不想手动设置每个option的value，可以先在代码中维护选项列表，再通过选中的文本匹配索引：

首先在组件代码里定义选项集合：

private List<string> carOptions = new List<string>
{
    "select", "opel", "ford", "subaru", "renault", "mercedes"
};
private string selected_type; // 原绑定变量

修改Razor页面的下拉框，用循环生成选项：

<td class="td_DiagBuff_data" style="max-width: 150px">
<select @bind="selected_type" @onchange="@(e => func_MD_type(e, index))">
    @foreach (var option in carOptions)
    {
        <option>@option</option>
    }
</select>
</td>

最后在处理方法中获取索引：

private void func_MD_type(ChangeEventArgs e, int index)
{
    string selectedText = e.Value.ToString();
    int selectedIndex = carOptions.IndexOf(selectedText);
    // 选中ford时，selectedIndex会返回2
}

注意：如果选项文本存在重复，这种方式会返回第一个匹配项的索引，需确保选项文本唯一。

内容的提问来源于stack exchange，提问作者Dargento