inputselect in Blazor 8

Question

I'm learning Blazor 8 and facing an issue: I have a list of persons. the Person object has an id, a name and an age. I would like to use two dropdown buttons to display or control each other. After selected a name, the age dropdown should display the age of the selected person's name and vise versa. I don't want to use JSRuntime.

Thanks for your help

with the following code I am able to get the age after selecting the name and vise versa. But I'm not able to set them in the dropdown button:

@inject PersonContext DB

<div class="mb-3">
    <label for="pAge" class="form-label">Age:</label>
    <InputSelect @bind-Value="selectedAge">                          
        <option value="">select an age...</option>
        @foreach (var pers in DB.Persons)
        {
            <option value="@pers.Name">
                @pers.Age
            </option>
        }
    </InputSelect>
</div>  
<div class="mb-3">
    <label for="pName" class="form-label">name:</label> 
    <InputSelect @bind-Value="selectedName">
        <option value="">select a name...</option>
        @foreach (var pers in DB.Persons)
        {
            <option value="@pers.Age">
                @pers.Name
            </option>
        }
    </InputSelect>
</div>  

@code {
    public string? selectedName { get; set; } = string.Empty;
    public string? selectedAge { get; set; } = string.Empty;
}

Answer 1

I think mix the @bind-Value="selectedAge" with option value="@pers.Name" is not a good idea. You could try following sample:

@page "/"

<div class="mb-3">
    <label for="pAge" class="form-label">Age:</label>
    <InputSelect @bind-Value="selectedAge" @bind-Value:after="AgeChanged">                          
        <option value="">select an age...</option>
        @foreach (var pers in Persons)
        {
            <option value="@pers.Age">
                @pers.Age
            </option>
        }
    </InputSelect>
</div>  
<div class="mb-3">
    <label for="pName" class="form-label">name:</label> 
    <InputSelect @bind-Value="selectedName" @bind-Value:after="NameChanged">
        <option value="">select a name...</option>
        @foreach (var pers in Persons)
        {
            <option value="@pers.Name">
                @pers.Name
            </option>
        }
    </InputSelect>
</div>  

@code {
    private void AgeChanged()
    {
        var choosedPerson = Persons.FirstOrDefault(p => p.Age==selectedAge);
        selectedName = choosedPerson.Name;
    }
    private void NameChanged()
    {
        var choosedPerson = Persons.FirstOrDefault(p => p.Name == selectedName);
        selectedAge = choosedPerson.Age;
    }

    public string? selectedName { get; set; } = string.Empty;
    public string? selectedAge { get; set; } = string.Empty;

    List<Person> Persons = new List<Person>
    {
        new Person{Name="Tom",Age="11"},
        new Person{Name="Alex",Age="12"},
        new Person{Name="Kite",Age="13"},
        new Person{Name="Josh",Age="14"},
    };

    public class Person
    {
        public string Name{ get; set; }
        public string Age { get; set; }
    }
}