Problem with a simple select list, on razor pages

Question

Using Blazor server App, trying to have a simple real time select list, I need the selected option from the dropdown list , to be shown on html page/view at the same time.

@page "/"

<h1>Hello, world!</h1>    
<EditForm Model="student" OnValidSubmit="submit">
    <p>
        <label>FullName</label>
        <InputText @bind-Value="student.FullName"></InputText>
    </p>
    <p>
        <label>City</label>
        <InputSelect @bind-Value="student.City">                
            @foreach (var city in cityList)
            {
                <option value="@student.City">@city</option>
            }
        </InputSelect>
    </p>        
     <button class="form-control col-md-3 btn-danger" type="submit">Submit</button>        
</EditForm>

<div id="showresult">
    <p>Name:: @student.FullName</p>
    <p>City:: @student.City</p>
</div>
@code
{
    public class Student
        {       
            public string FullName { get; set; }           
            public string City { get; set; }
        }
    Student student = new Student(); 
    List<string> cityList = new List<string>();
    protected override void OnInitialized()
    {
        cityList.Add("London");
        cityList.Add("Paris");
        cityList.Add("Moscow");
        cityList.Add("LA");
    }
    public void submit()
    {
        var temp = student;
    }
}

This is the fiddle :
SimpleSelectListInBlazor

I'm not talking about onchange,oninput and other events.
The problem is, after loading the page, when I type my FullName the showresult changes and shows the typed name, but when I select a city from dropdown list, at first choice, showresult shows the selected item, but if I change my choice, and select another city, it does not change any more . If I submit my form, only the first city chosen, will be submitted.
Sometimes regardless of my selection, the select list jump to first city, and if I repeat my choice, it will be correct.

Try the fiddle to see what's going on. I do not know why this is happening.

Answer 1

Hi @Ehsan ,

According to your codes, I found you bind the option value with @student .City. This will always be the first Landon not the cityList 's value. <option value="@student.City">@city</option>

I suggest you could modify your codes to below and then it will work well.

    <p>  
        <label>City</label>  
        <InputSelect @bind-Value="student.City">  
            <option value="">Select City</option>  
            @foreach (var city in cityList)  
            {  
                <option value="@city">@city</option>  
            }  
        </InputSelect>  
    </p>  

More details, you could refer to this example.