@page "/" @if(additionalFields != null) { int count = additionalFields.Count; for (var i=0; i < count; i++) { int current = i; // don't use loop variable in binding var additionalField = additionalFields[current]; <div class="col-sm-6"> <div class="page_input"> <label> @additionalField.Caption (@current)</label> <select class="checkout-control pristine untouched" @onchange="((e) => HandleSelect(e, current))" > @foreach (var keyValue in additionalField.ValueList) { <option value="@keyValue.Sort" selected="@(keyValue.Sort == additionalField.Selected)">@keyValue.SelectionText</option> } </select> </div> </div> } } <hr/> @if(events != null) { <ul> @foreach(var evt in events) { <li>@evt</li> } </ul> } @code { protected override void OnInitialized() { additionalFields = new List<AdditionalField>(); additionalFields.Add(new AdditionalField() { Caption = "field1", ValueList = new List<Value>() { new Value() { Sort = "sort1", SelectionText ="Sort 1" }, new Value() { Sort = "sort2", SelectionText ="Sort 2" }, new Value() { Sort = "sort3", SelectionText ="Sort 3" }, } }); additionalFields.Add(new AdditionalField() { Caption = "field2", ValueList = new List<Value>() { new Value() { Sort = "sortA", SelectionText ="Sort A" }, new Value() { Sort = "sortB", SelectionText ="Sort B" }, new Value() { Sort = "sortC", SelectionText ="Sort C" }, } }); // set the selected item on the second list to the second sort additionalFields[1].Selected = "sortB"; } void HandleSelect(ChangeEventArgs e, int index) { string selected = e.Value.ToString(); var item = additionalFields[index]; events.Add($"User selected '{selected}' for index {index} - {item.Caption}"); // set the value item.Selected = selected; } private List<AdditionalField> additionalFields; private List<string> events = new List<string>(); class Value { public string Sort {get;set;} public string SelectionText {get;set;} } class AdditionalField { public string Caption {get;set;} public string Selected {get;set;} public List<Value> ValueList {get;set;} } }