Blazor选择下拉菜单，通过代码设置活动值

我正在根据列表的内容动态填充下拉列表的值。当下拉列表中的某个项目被选中时，将显示删除该项目的选项。当项目被删除时，它首先从列表中删除，然后重新生成下拉列表，这就是我遇到问题的地方。重建下拉列表时，删除的下拉列表下方的值显示为selected，而不是将其返回到默认值(这会在触发@onchange值的情况下发生(。重建下拉列表时，如何使其返回到默认值？

这是一些代码，Razor代码：

<select class="form-control" @onchange="selectedValue">
<option value="">select one</option>
@foreach (var mod in values)
{
<option value="@mod.Id">@mod.Name</option>
}
</select>

正在填充列表的名为Items的类：

public class Items
{
public string Name { get; set; }
public int Id { get; set; }
public Items(string name, int id)
{
Name = name;
Id = id;
}
}

列表本身(在填充之前(：

public List<Items> itm = new List<Items>();

被称为onchange的函数：

public string SelectedValue = "";
public void selectedValue(ChangeEventArgs selectEvent)
{
SelectedValue = selectEvent.Value.ToString();
}

总之，这就是正在发生的事情：

列表中包含项目。
select列表是使用@foreach循环(se剃刀代码(由列表中的项目构建的。
从下拉列表中选择一个项目，这将运行selectedValue((函数并更改selectedValue字符串中的值。
从项目列表中删除所选项目
使用模式化列表重建下拉列表
所选项目现在设置为已删除项目正下方的项目，这是在没有运行onchange的情况下发生的。这就是的问题
现在，下拉列表中选定的值与SelectedValue字符串中的值不对应。

这可能可以通过将元素设置为其默认选项/值来解决，但我不知道如何做到这一点。

如何将所选值更改为下拉列表中的默认选项(在我的情况下是值为"的"select one"选项(？

我也遇到了类似的问题。我通过在生成option元素的循环中放入if语句来解决它，并从中有条件地添加selected属性，即。；

<select @onchange="listChanged">
@foreach (var item in PageModel.Lists)
{
if(item.Id == currListId)
{
<option value="@item.Id" selected>@item.Name</option>
}
else
{
<option value="@item.Id">@item.Name</option>
}
}
</select>

很抱歉没有花时间调整我的代码以适应您的情况，但您已经解决了您的问题。这是给其他遇到这个问题的人的(下次我需要做这样的事情时，请告诉我，哈哈(。

我如何将所选值更改为下拉列表的默认选项(在我的情况下是"选择一个"有值的选项"(？

恐怕您只能使用以下JSInterop：

一般来说，在select元素中选择一个选项后，select元素的selectedIndex属性将设置为0。这是在selectedValue方法中完成的。。。

这是一个完整的工作代码片段。运行并测试…

@page "/"
<select @ref="myselect" id="myselect" class="form-control"
@onchange="selectedValue">
<option selected value="-1">select one</option>
@foreach (var item in items)
{
<option value="@item.ID">@item.Name</option>
}
</select>
<p>@SelectedValue</p>
@code {
[Inject] IJSRuntime JSRuntime { get; set; }
private ElementReference myselect;
List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { 
Name = $"Name {i.ToString()}", ID = i }).ToList();
public string SelectedValue = "";
public void selectedValue(ChangeEventArgs args)
{
SelectedValue = args.Value.ToString();
var item = items.Single(item => item.ID == Convert.ToInt32(SelectedValue));
items.Remove(item);
JSRuntime.InvokeVoidAsync("exampleJsFunctions.selectElement", myselect);
}
public class Item
{
public string Name { get; set; }
public int ID { get; set; }
}
}

将以下JS代码放入_Host.cshtml文件中：

<script src="_framework/blazor.server.js"></script>
<script>
window.exampleJsFunctions =
{
selectElement: function (element) {
element.selectedIndex = 0;
}
};
</script>

在.NET MAUI Blazor项目中遇到了类似的问题。在这个项目中，我正在开发一个视图模型来管理大部分表单行为。此外，CommunityToolkit.Mvvm用于管理物业变更管理。因此，这个答案将基于为使用绑定而调整的配置。它也遵循@MikeT给出的答案
假设另一个因素正在影响选择决策。在我的情况下，如果值中只有一个元素可供选择，则该元素将自动被选中。否则，用户将进行选择。

<select class="form-control" @Bind="vm.selectedValueId"
disabled="@(vm.IsValuesDataLoaded == false)">
<option value="">select one</option>
@foreach (var mod in values)
{
@if(@mod.Id == @vm.selectedValueId)
{
<option value="@mod.Id" selected>@mod.Name</option>
}
else
{
<option value="@mod.Id">@mod.Name</option>
}
}
</select>
@code{
ValueViewModel vm;  //instantiated inside OnInitialized
// more ...
}

由于视图模型正在处理值中元素列表的构造，因此所有活动都在那里进行。因此，视图模型代码的这一部分将是——

partial void OnSomeOtherPreliminaryPropertyChanged(string? value)
{
//  code for processing this event
//  condition test could also be for an entry previously selected
if(values.Count == 1)
{
SelectedValueId = whatever_Value_Should_Be_Default_For_Selection;
OnModuleIdChanged(selectedValueId);
}
IsValuesDataLoaded = true;
}
[ObservableProperty]
private int selectedValueId;
[ObservableProperty]
private string selectedValue;
//OnSelected... is called when selectedValueId changes. In this case
// the code is changing the selection
partial void OnSelectedValueIdChanged(int? value)
{
SelectedValue = Values[value].Name
}
public bool IsValuesDataLoaded  //controls the enabled state of the select element
{
get;
private set;
} = false;

相关内容

最新更新

热门标签：