我正在根据列表的内容动态填充下拉列表的值。选择下拉列表中的项目显示删除此项目的选项。当项目被删除时,它首先从列表中删除,然后重建下拉列表,这是我遇到问题的地方。重建下拉列表时,它不会将下拉列表返回到其默认值,而是将删除的值正下方的值显示为选中(这不会触发 @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();
}
总而言之,这就是正在发生的事情:
这可能可以通过将元素设置为其默认选项/值来解决,但我不知道如何做到这一点。
如何将选定的值更改为我的下拉列表的默认选项(在我的情况下是值为“”的“选择一个”选项)?
最佳答案
How can I change the selected value to be the default option (in my case the "select one" option with value "") of my dropdown list?
恐怕您只能使用 JSInterop 来做到这一点,如下所示:
一般来说,select 元素上的 selectedIndex 属性在您选择 select 元素中的一个选项后设置为 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; }
}
}
在_Host.cshtml文件中加入以下JS代码:<script src="_framework/blazor.server.js"></script>
<script>
window.exampleJsFunctions =
{
selectElement: function (element) {
element.selectedIndex = 0;
}
};
</script>
关于drop-down-menu - Blazor 选择下拉列表通过代码设置事件值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60599131/