本文介绍了Blazor选择下拉菜单按代码设置活动值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我根据列表的内容动态填充下拉列表的值。选择下拉列表中的项目时,将显示删除该项目的选项。当项目被删除时,它首先从列表中删除,然后重新构建下拉列表,这就是我遇到问题的地方。在重新构建下拉列表时,它不会将下拉列表返回到其缺省值,而是将删除的下拉列表下面的值显示为选定的(这种情况下,@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 razor代码)由列表中的项目构建的。
从下拉列表中选择一项,这将运行selectedValue()函数并更改SelectedValue字符串中的值。
所选项目将从项目列表中删除
使用修改后的列表重新生成下拉列表
所选项目现在已设置为已删除项目正下方的项目,这是在未运行onchange的情况下发生的。这就是问题所在
现在下拉列表的选定值与SelectedValue字符串的选定值不对应。
这可能可以通过将元素设置为其默认选项/值来解决,但我无法确定如何执行此操作。
如何将选定的值更改为下拉列表的默认选项(在我的情况下是值为""的"选择一个"选项)?
推荐答案
恐怕只有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>
这篇关于Blazor选择下拉菜单按代码设置活动值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!