title: Blazor select bind to a value in a list
body: <p>I was able to bind an int type (which is the first element of the list SelectedDiagnosisIdList) variable to the selected element of a html select:</p>
  
  <pre><code>&lt;div&gt;
      &lt;label&gt;Diagnosis:&lt;/label&gt;
      &lt;div&gt;
          &lt;select @bind="@userInfo.SelectedDiagnosisIdList[0]"&gt;
              @foreach (var item in diagnoses)
              {
                  &lt;option value="@item.Id"&gt;@item.Name&lt;/option&gt;
              }
          &lt;/select&gt;
          &lt;p&gt;@userInfo.SelectedDiagnosisIdList[0]"&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  @code
  {
      List&lt;int&gt; SelectedDiagnosisIdList = new List&lt;int&gt;() { 0 };
      List&lt;Diagnosis&gt; diagnoses; //  populated from db in OnInitializedAsync
  
  }
  </code></pre>
  
  <p>This nicely works, the value of the paragraph changes when I change the selected value on the UI.</p>
  
  <hr>
  
  <p>Now, I want to add more Diagnoses, so I am trying to maintain more s and add more elements to the SelectedDiagnosisIdList:</p>
  
  <pre><code>&lt;div&gt;
      &lt;label&gt;Diagnosis:&lt;/label&gt;
      &lt;div&gt;
          @for(int i = 0; i &lt; userInfo.SelectedDiagnosisIdList.Count; i++)
              &lt;select @bind="@userInfo.SelectedDiagnosisIdList[i]"&gt;
                  @foreach (var item in diagnoses)
                  {
                      &lt;option value="@item.Id"&gt;@item.Name&lt;/option&gt;
                  }
              &lt;/select&gt;
              &lt;p&gt;@userInfo.SelectedDiagnosisIdList[i]&lt;/p&gt;
          }
      &lt;/div&gt;
  &lt;/div&gt;
  
  @code
  {
      List&lt;int&gt; SelectedDiagnosisIdList = new List&lt;int&gt;() { 0 };
      List&lt;Diagnosis&gt; diagnoses; //  populated from db in OnInitializedAsync
  
  }
  </code></pre>
  
  <p>This will spoil the program, nothing happens on the UI when I select an item and on the console:</p>
  
  <pre><code>blazor.webassembly.js:1 WASM: ﻿Unhandled exception rendering component:
  blazor.webassembly.js:1 WASM: System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection.
  WASM: Parameter name: index
  blazor.webassembly.js:1 WASM:   at (wrapper managed-to-native) System.Reflection.RuntimeMethodInfo.InternalInvoke(System.Reflection.RuntimeMethodInfo,object,object[],System.Exception&amp;)
  blazor.webassembly.js:1 WASM:   at System.Reflection.RuntimeMethodInfo.Invoke (System.Object obj, System.Reflection.BindingFlags invokeAttr, System.Reflection.Binder binder, System.Object[] parameters, System.Globalization.CultureInfo culture) &lt;0x20c1360 + 0x000ce&gt; in &lt;71c4fd446b1842ba93fd332e5f4f9c06&gt;:0 
  blazor.webassembly.js:1 WASM: --- End of stack trace from previous location where exception was thrown ---
  blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion (System.Threading.Tasks.Task task) &lt;0x269de40 + 0x000e6&gt; in &lt;cbf249d7f04d4fa18d15bfae8ef7f389&gt;:0 
  WASM:   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask (System.Threading.Tasks.Task taskToHandle) &lt;0x269e988 + 0x000c2&gt; in &lt;cbf249d7f04d4fa18d15bfae8ef7f389&gt;:0 
  </code></pre>
  
  <p>I dont' understand what is the problem and how could I make it work... Please help</p>