【发布时间】：2021-09-09 01:58:03
【问题描述】：
注意：我在本文末尾添加了工作示例。在我的 FireFox 中，他们演示了这个问题。任何人都可以在您的 Firefox 中使用我的示例并进行复制。我不知道这是否是工作问题。
我只想让我的 Blazor 解决方案在 Edge 和 FireFox 中工作，但后者在 select 列表中无法正常工作。
4、10 和15 years ago 一直在谈论我的问题，但讨论的解决方案并没有解决问题，其他一些Blazor ideas 也没有解决问题。您可以看到尝试修复的一些残余仍然在我的 html 中，例如selectedIndex = "-1"，并且所有内容都有一个唯一的名称。
下图是select在渲染显示和浏览器的开发工具中的初始状态。
当我选择第三个或第四个选项时会出现问题 - FireFox 将其翻转回第二个选项。在 Edge 中，它坚持我选择的选项。
Blazor 使用基本循环技术生成 select。 （我也尝试过使用 JSRuntime 设置 selectedIndex）。
<select name="@QuestionItem.Id" style="width: 218px; height:34px;" TValue="Answer" @onchange="SelectChanged">
<option disabled="" selected="">Select Answer</option>
@foreach (var a in QuestionItem.Answers)
{
// maybe https://stackoverflow.com/questions/60599131/blazor-select-dropdown-set-active-value-by-code
@if (a.IsDisqualified)
{
<option disabled="disabled" value="@a.Id">@a.Name</option>
}
else
{
@if (a.IsSelected)
{
<option name="@a.Id" value="@a.Id" selected="selected">@a.Name</option>
}
else
{
<option name="@a.Id" value="@a.Id">@a.Name</option>
}
}
}
</select>
驱动循环的对象具有 IsSelected 属性，该属性使 Blazor 写出 <option selected="selected"> 元素。 @onchange 事件将新选择的选项提交到数据库并运行一堆商业规则。
现在，我将演示这个问题。
使用 Edge，我选择了“完全安装”选项，它表现良好 - select 呈现“完全安装”并且 html 正确地在同一选项上有 selected="selected"。
现在我用 FireFox 重复这些步骤。这里又是默认状态。
我再次选择“完全安装”，但现在我们的状态不一致 - select 翻转为“否”，但 html 显示选择了“完全安装”。
无论如何，正确的值都会写入数据库，因此在刷新 FireFox 时会显示正确的选择选项。 Web 开发人员已经忍受了这一点，或者 Mozilla 一直让这个问题陷入困境，这似乎是不可想象的。那我做错了什么？
我拥有的 FireFox 版本是 78.11.0esr（64 位）。
这是一个重现问题的简单示例。
@page "/Select"
<h3>Select</h3>
@if (SelectData != null)
{
<div class="form-group col-md-6">
<label for="dur">Duration</label>
<select class="custom-select" @onchange="this.SelectChanged">
<option disabled value="-1" selected>Select an Option</option>
@foreach (var duration in SelectData)
{
@if (duration.IsSelected)
{
<option value="@duration.Name" selected>@duration.Name</option>
}
else
{
<option value="@duration.Name">@duration.Name</option>
}
}
</select>
</div>
}
else
{
<label>Loading</label>
}
<div class="p-2 m-2">
Current Value : @_Duration.Name
</div>
<div class="p-2 m-2">
IsSelected : @_Duration.IsSelected
</div>
@code {
private class Duration
{
public string Name { get; set; }
public bool IsSelected { get; set; }
}
private Duration _Duration = new Duration();
private void SelectChanged(ChangeEventArgs e)
{
var selected = SelectData.SingleOrDefault(t => t.Name == (string)e.Value);
if (selected != null)
{
_Duration = selected;
_Duration.IsSelected = true;
}
}
private List<Duration> SelectData = new List<Duration>
{
new Duration{ Name = "Hello1", IsSelected = false},
new Duration{ Name = "Hello2", IsSelected = false},
new Duration{ Name = "Hello3", IsSelected = false},
};
}
这是一个稍微不同的例子，同样的 FF 问题
@page "/Select"
<h3>Select</h3>
@if (SelectData != null)
{
<div class="form-group col-md-6">
<label for="dur">Duration</label>
<select class="custom-select" @onchange="this.SelectChanged">
<option disabled selected>Select an Option</option>
@foreach (var duration in SelectData)
{
@if (_Duration == duration)
{
<option value="@duration.Name" selected>@duration.Name</option>
}
else
{
<option value="@duration.Name">@duration.Name</option>
}
}
</select>
</div>
}
else
{
<label>Loading</label>
}
<div class="p-2 m-2">
Current Value : @_Duration.Name
</div>
<div class="p-2 m-2">
IsSelected : @_Duration.IsSelected
</div>
@code {
private class Duration
{
public string Name { get; set; }
public bool IsSelected { get; set; }
}
private Duration _Duration = new Duration();
private void SelectChanged(ChangeEventArgs e)
{
var selected = SelectData.SingleOrDefault(t => t.Name == (string)e.Value);
if (selected != null)
{
_Duration = selected;
_Duration.IsSelected = true;
}
}
private List<Duration> SelectData = new List<Duration>
{
new Duration{ Name = "Hello1", IsSelected = false},
new Duration{ Name = "Hello2", IsSelected = false},
new Duration{ Name = "Hello3", IsSelected = false},
};
protected override async Task OnInitializedAsync()
{
var a = SelectData.FirstOrDefault(t => t.IsSelected);
if (a != null)
_Duration = a;
}
}
【问题讨论】：
-
邮政编码为文字，而非图片。它应该对 Google 开放。
-
我用代码替换了代码图片，并提供了一个工作示例。
标签： firefox select blazor selected