How can I change the list elements of a select box with the selected item of another select box in Blazor?

Question

I have a blazor page with two select boxes (drop-down list). In the first select box the user hast to select the departmant. According to the selection, the list of the second selectbox (Machine-Group=MG) is changed. I have written following code, but the list of the second select box is not changing, whatever I select in the department select box.

@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

I implement using this in my code and its working perfect

@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

It is because you are not modifying the right variables: you are defining new local variables in your if statements (remove the type).

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";
  }

}

How can I change the list elements of a select box with the selected item of another select box in Blazor?

Question

2 answers

solution1
1 2022-06-27 08:37:15

solution2
1 ACCPTED 2022-06-27 09:05:48

How can I change the list elements of a select box with the selected item of another select box in Blazor?

Question

2 answers

solution1 1 2022-06-27 08:37:15

solution2 1 ACCPTED 2022-06-27 09:05:48

solution1
1 2022-06-27 08:37:15

solution2
1 ACCPTED 2022-06-27 09:05:48