如何使用 Blazor 中另一个选择框的选定项更改选择框的列表元素？

Question

我有一个带有两个选择框（下拉列表）的 Blazor 页面。 在第一个选择框中，用户必须选择部门。 根据选择，改变第二个选择框（Machine-Group=MG）的列表。 我已经编写了以下代码，但是无论我在部门选择框中选择什么，第二个选择框的列表都没有改变。

@page "/connect"

<body>
<select class="Dep" @onchange="func_dep">
    @foreach (var template in templates_dep)
    {
    <option value=@template>@template</option>
    }
</select>
<select class="MG" @onchange="func_MG">
    @foreach (var template in templates_MG)
    {
    <option value=@template>@template</option>
    }
</select>

<p>Selected Dep is: @selectedString_dep</p>
<p>Selected MG is: @selectedString_MG</p>

@functions {
    List<string> templates_dep = new List<string>() { "MFG", "MFT", "MFS", "MFP", "MFP" };
    string selectedString_dep = "MFG";
// This is the default list of select-box MG
    List<string> templates_MG = new List<string>() { "MG1", "MG2", "MG3", "MG4", "MG4" };
    string selectedString_MG = "MG1";

    void func_dep(ChangeEventArgs e)
    {
        selectedString_dep = e.Value.ToString();
if(selectedString_dep=="MFT")
{
List<string> templates_MG = new List<string>() { "MFT1", "MFT2", "MFT3", "MFT4", "MFT5" };
    string selectedString_MG = "MFT1";
}
if(selectedString_dep=="MFS")
{
List<string> templates_MG = new List<string>() { "MFS1", "MFS2", "MFS3", "MFS4", "MFS5" };
    string selectedString_MG = "MFS1";
}

    }

  void func_MG(ChangeEventArgs e)
    {
        selectedString_MG = e.Value.ToString();

    }
}

Answer 1

我在我的代码中实现了它并且它的工作完美

@page "/country"

@using BlazorDDL.Shared.Models
@inject HttpClient Http

<h1>Country Data</h1>

@if (countryList == null)
    {    
    <p><em>Loading...</em></p>
    }
    
    else{    
    <div class="row">
        <div class="col-md-4">            
            <label for="Country" class="control-label">Country</label>
        </div>        
        <div class="col-md-4">            
            <label asp-for="Cities" class="control-label">Cities</label>
        </div>
    </div>
    <div class="row" style="padding-top:10px">
        <div class="col-md-4">            
            <select class="form-control" onchange="@CountryClicked">                
                <option value="">-- Select Country --</option>                
                @foreach (var country in countryList)                
                {                    
                <option value="@country.CountryId">@country.CountryName</option>
                }            
            </select>        
        </div>

        <div class="col-md-4">            
            <select class="form-control" onchange="@CityClicked">                
                <option value="">-- Select City --</option>                
                @if (cityList != null)                
                {                    
                @foreach (var city in cityList)                    
                {                        
                <option value="@city.CityName">@city.CityName</option>
                }                
                }                       
            </select>
        </div>
    </div>

    <div class="row" style="padding-top:50px">  
        <div class="col-md-4">         
            <label class="control-label">Country Name: @countryName</label>   
        </div>        
        <div class="col-md-4">      
            <label class="control-label">City Name: @cityName</label>      
        </div>  
    </div>
    }
            
@code {
    List<Country> countryList = new List<Country>();
    List<Cities> cityList = new List<Cities>();
    string countryId { get; set; }
    string countryName { get; set; }
    string cityName { get; set; }
    
    protected override async Task OnInitAsync()
    {    
        countryList = await Http.GetJsonAsync<List<Country>>("api/Countries/GetCountryList");
    }
            
    protected async void CountryClicked(UIChangeEventArgs countryEvent)
    {    
        cityList.Clear();    
        cityName = string.Empty;    
        countryId = countryEvent.Value.ToString();    
            
        countryName = countryList.FirstOrDefault(s => s.CountryId == countryId).CountryName;    
        cityList = await Http.GetJsonAsync<List<Cities>>("api/Countries/GetCities/" + countryId);    
        this.StateHasChanged();
    }
            
    void CityClicked(UIChangeEventArgs cityEvent)
    { 
        cityName = cityEvent.Value.ToString();   
        this.StateHasChanged();
    }
        
}

Answer 2

这是因为您没有修改正确的变量：您在if语句中定义了新的局部变量（删除类型）。

void func_dep(ChangeEventArgs e)
{
  selectedString_dep = e.Value.ToString();
  if(selectedString_dep=="MFT")
  {
    templates_MG = new List<string>() { "MFT1", "MFT2", "MFT3", "MFT4", "MFT5" };
    selectedString_MG = "MFT1";
  }
  if(selectedString_dep=="MFS")
  {
    templates_MG = new List<string>() { "MFS1", "MFS2", "MFS3", "MFS4", "MFS5" };
    selectedString_MG = "MFS1";
  }

}

如何使用 Blazor 中另一个选择框的选定项更改选择框的列表元素？

问题描述

2 个解决方案

解决方案1
1 2022-06-27 08:37:15

解决方案2
1 已采纳 2022-06-27 09:05:48

如何使用 Blazor 中另一个选择框的选定项更改选择框的列表元素？

问题描述

2 个解决方案

解决方案1 1 2022-06-27 08:37:15

解决方案2 1 已采纳 2022-06-27 09:05:48

解决方案1
1 2022-06-27 08:37:15

解决方案2
1 已采纳 2022-06-27 09:05:48