Blazor中如何根据一个select选中项动态修改另一个select的选项列表
问题根源
你的代码不生效是核心错误+逻辑缺项导致的:
- 变量遮蔽:在
func_dep的if判断块里,你写了List<string> templates_MG = new List<string>(){...},这里的List<string>关键字相当于在方法内部重新声明了一个和类级字段同名的局部变量,你修改的是这个只在if块里生效的局部变量,绑定到下拉框的类级字段templates_MG从头到尾都没被改动过,自然UI不会更新。selectedString_MG也是同样的问题,if块里的声明是局部变量,改不到外层的字段。 - 逻辑缺项:你只写了
MFT和MFS两个部门的机组列表判断,选MFG、MFP的时候没有对应赋值逻辑。
另外你的代码还有两个不规范的点:
- Blazor组件本身是寄宿在宿主页面的body里的,不需要在组件里单独写
<body>标签,属于无效冗余代码。 - 初始的部门列表、默认机组列表里都有重复值,会导致下拉选项重复。
修复后代码
直接替换成下面的代码就能正常运行:
@page "/connect" <select class="Dep" @onchange="func_dep"> @foreach (var template in templates_dep) { <option value="@template" selected="@(template == selectedString_dep)">@template</option> } </select> <select class="MG" @onchange="func_MG"> @foreach (var template in templates_MG) { <option value="@template" selected="@(template == selectedString_MG)">@template</option> } </select> <p>Selected Dep is: @selectedString_dep</p> <p>Selected MG is: @selectedString_MG</p> @code { // 去重后的部门列表 private List<string> templates_dep = new List<string>() { "MFG", "MFT", "MFS", "MFP" }; private string selectedString_dep = "MFG"; // 默认机组列表(对应MFG部门) private List<string> templates_MG = new List<string>() { "MG1", "MG2", "MG3", "MG4" }; private string selectedString_MG = "MG1"; private void func_dep(ChangeEventArgs e) { selectedString_dep = e.Value.ToString(); // 直接给类级字段赋值,不要重新声明局部变量 switch (selectedString_dep) { case "MFT": templates_MG = new List<string>() { "MFT1", "MFT2", "MFT3", "MFT4", "MFT5" }; selectedString_MG = "MFT1"; break; case "MFS": templates_MG = new List<string>() { "MFS1", "MFS2", "MFS3", "MFS4", "MFS5" }; selectedString_MG = "MFS1"; break; case "MFP": // 可替换为MFP部门实际的机组列表 templates_MG = new List<string>() { "MFP1", "MFP2", "MFP3" }; selectedString_MG = "MFP1"; break; default: // MFG部门回到默认列表 templates_MG = new List<string>() { "MG1", "MG2", "MG3", "MG4" }; selectedString_MG = "MG1"; break; } } private void func_MG(ChangeEventArgs e) { selectedString_MG = e.Value.ToString(); } }
补充说明
- 我给option标签加了
selected属性绑定,避免下拉框显示值和实际绑定值不一致的问题。 - 原来的
@functions块在新版Blazor里推荐用@code块,功能完全一致,属于官方推荐的规范写法。 - 因为是在
@onchange触发的事件方法里修改绑定字段,Blazor会自动触发组件重绘,不需要手动调用StateHasChanged()。
内容的提问来源于stack exchange,提问作者Mdarende
相关产品推荐
相关产品推荐

