如何在不使用Blazor中的bind的情况下在下拉列表中确定选定的值？

Question

我正试图在C#中完成这一切，但我可能不得不求助于JavaScript。

我有一个下拉列表，我想做一个换一次的活动。我不能将下拉列表绑定到模型，因为绑定阻止了onchange的使用。我需要使用onchange事件来修改屏幕上的某些内容，具体取决于所选内容。也许一些代码会有帮助。

<select id="BrandSelected" @onchange="BrandIsChanged">
<option value="NewBrand">--Create New Brand--</option>
@foreach (var brand in Brands)
{
   if(Model.BrandID == brand.BrandID)
   {
      <option value="@brand.BrandID" selected>@brand.Brand</option>
   }
   else
   {
      <option value="@brand.BrandID">@brand.Brand</option>
   }
}
</select>
<label id="BrandLabel" hidden>New Brand</label>
<InputText id="NewBrandInput" @bind="NewBrandProp" hidden></InputText>

所以我在顶部添加了一个选项来创建一个新的品牌。这是一个重新插入，所以有可能其中一个品牌可能已经被选中。它仍将是可变的更新。如果用户选择任何现有的品牌，它就能工作，但如果下拉列表中不存在新品牌，我希望能够添加一个新品牌。如果在BrandIsChanged方法中选择了NewBrand，那么我希望创建一个具有InputText值的新品牌。这意味着，如果所选的值为InputText，则必须同时修改标签和NewBrand才能在更改时显示。那么，如何在BrandIsChanged方法中确定所选项(BrandSelected)值是什么？

其他可能有帮助的事情：

@code{
//Populated on load in a method
private IEnumerable<T_IFS_BrandDTO> Brands { get; set; } = new List<T_IFS_BrandDTO>();
//The new brand, if user decides to enter one.
private string NewBrandProp { get; set; }
}

Answer 1

onchange事件将ChangeEventArgs参数传递给您的事件处理程序，您可以使用该处理程序获取选定的值。

<select id="BrandSelected" @onchange="BrandIsChanged">
    ...
</select>

@code {
    private BrandIsChanged(ChangeEventArgs args)
    {
         if (args?.Value?.ToString() == "NewBrand")
         {
             // do stuff
         }
    }
}