选择选项后，"选择"框为空

Question

我的Blazor表单中有一个Html选择框，用户可以在其中从GradesTable中选择等级。但是，当用户选择一个选项时，选择框矩形将变为空白状态。我曾尝试在<option>标记中使用selected，但当进行选择时，框会锁定到最后一个选项。是否在框中显示所选选项？

<label for="Grade">Choose a Grade:</label>
<select Name="Grade" id="Grade" @bind="selectedGrade">
<option value="">---No Grade---</option>
@foreach (var item in grade)
{
<option value="@item.Id" selected>@item.GradeDescription</option>
}
</select>
@code{
private int? selectedGrade;
private List<GradeTable> FilteredGrades => selectedGrade.HasValue ?
grades.Where(s => s.Grade==selectedGrade.Value).ToList() :
grades;
}

Answer 1

您没有正确设置selected属性：selected=@"selectedGrade == item.Id"

true将渲染属性，而false不会。

这样做：

<label for="Grade">Choose a Grade:</label>
<select Name="Grade" id="Grade" @bind="selectedGrade">
<option value="">---No Grade---</option>
@foreach (var item in grade)
{
<option value="@item.Id" selected=@"selectedGrade == item.Id">@item.GradeDescription</option>
}
</select>
@code {
private int? selectedGrade;
}