title: How to get two-way binding in Blazor with a SELECT Component?
body: <p>I am trying to write a <strong>Blazor component</strong> that uses a <code>&lt;select...&gt;</code>, to update the variable passed in from the parent.</p>
  <p>I want to click on the drop-down (select/options), choose an option, and have that automatically update the variable in the parent.</p>
  <p>I can get it to work if I don't use a component.  But the only way I can get it to work from a component is if I also use a button in the component (see the button in the Component code).  But eventually there will be several components called from the same parent.  It would not be practical to have a separate button for each component.  So the button has to go away.</p>
  <p>The <strong>@bind</strong> uses the &quot;onchange&quot; parameter to the select, so that won't even compile.</p>
  <p>I've tried <strong>CascadingValue/CascadingParam</strong> but that does not update the parent value either (unless I use a button...)</p>
  <p>Here is the parent:</p>
  <pre><code>@page &quot;/test&quot;
  @page &quot;/test/{param}&quot;
  
  @namespace ComponentTest.Pages
  
  @using System.Web
  @using ComponentTest.Pages
  
  &lt;h3&gt;Test Page&lt;/h3&gt;
  
  &lt;div class=&quot;border col-3&quot;&gt;
      &lt;h4&gt;Parent&lt;/h4&gt;
      &lt;hr /&gt;
      &lt;label for=&quot;parentValue&quot;&gt;Parent Value&lt;/label&gt;
      &lt;input id=&quot;parentValue&quot; @bind=&quot;@param&quot;/&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-3&quot;&gt;&amp;nbsp&lt;/div&gt;
  &lt;div class=&quot;border col-3&quot;&gt;
      &lt;h4&gt;Component Select&lt;/h4&gt;
      &lt;hr /&gt;
      &lt;SelectComponent @bind-Item=&quot;@param&quot;/&gt;
  &lt;/div&gt;
  
  @code {
      [Parameter]
      public string param { get; set; }
  }
  </code></pre>
  <p>And here is the component:</p>
  <pre><code>@using System.Collections.Generic
  @using System.Web
  
  &lt;div class=&quot;form-group&quot;&gt;
      &lt;p&gt;Component Value = @Item&lt;/p&gt;
      &lt;label for=&quot;Site&quot; class=&quot;font-weight-bold form-check-label&quot;&gt;List&lt;/label&gt;
      @if (list == null)
      {
          &lt;input id=&quot;Item&quot; class=&quot;form-control-sm&quot; @bind=&quot;@Item&quot; /&gt;
      }
      else
      {
          &lt;select id=&quot;Item&quot; class=&quot;form-control-sm&quot; @bind=&quot;@Item&quot;&gt;
              @foreach (var l in list)
              {
                  @if (Item != null &amp;&amp; String.Equals(l, Item, StringComparison.OrdinalIgnoreCase))
                  {
                      &lt;option selected value=&quot;@l&quot;&gt;@l&lt;/option&gt;
                  }
                  else
                  {
                      &lt;option value=&quot;@l&quot;&gt;@l&lt;/option&gt;
                  }
              }
          &lt;/select&gt;
      }
  &lt;/div&gt;
  &lt;button @onclick=&quot;UpdateParentsItem&quot; class=&quot;btn btn-primary&quot;&gt;Update Parent&lt;/button&gt;
  @code {
      public IEnumerable&lt;string&gt; list = new List&lt;string&gt;()
  {
          &quot;Item 1&quot;,
          &quot;Item 2&quot;,
          &quot;Item 3&quot;,
          &quot;Item 4&quot;,
          &quot;Item 5&quot;
      };
  
      [Parameter]
      public string Item { get; set; }
  
      [Parameter]
      public EventCallback&lt;string&gt; ItemChanged { get; set; }
  
      private async Task UpdateParentsItem()
      {
          await ItemChanged.InvokeAsync(Item);
      }
  }
  </code></pre>
  <p>I followed a few groovy examples for implementing events but none that I found actually solved the problem.</p>