title: Refresh DropDownList Based on Value From Input Field
body: <p>Is it possible to refresh a <code>@Html.DropDownList</code> based on value from an input field on the same form?</p>
  
  <p>For example, I have a field <code>@Html.TextBoxFor(m =&gt; m.CustomerFunds)</code> to which a value such as 50 would be entered, as soon as the user exits the field such as TAB for example, a function would be initiated to populate the DropDownList.</p>
  
  <p><strong>HomeController.cs</strong></p>
  
  <pre><code>public ViewResult Index()
  {
      var productList = new List&lt;WebApplication1.Product&gt;
      {
          new WebApplication1.Product{ProductName = "Please select a Product", ProductId = 0}
      };
      productList.AddRange(_repository.GetAllProducts());
  
      ViewBag.ProductList = new SelectList(productList, "ProductId", "ProductName", null);
  
      return View();
  }
  
  public SelectList GetProducts(int customerFunds)
  {
      var productList = new List&lt;WebApplication1.Product&gt;
      {
          new WebApplication1.Product {ProductName = "Please select a Product", ProductId = 0}
      };
      productList.AddRange(_repository.GetProducts(customerFunds));
  
      return new SelectList(productList, "ProductId", "ProductName", null);
  }
  </code></pre>
  
  <p><strong>Index.cshtml</strong></p>
  
  <pre><code>@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { role = "form" }))
  {
      @Html.TextBoxFor(m =&gt; m.CustomerFunds)
      @Html.DropDownList("ProductId", ViewBag.ProductList as SelectList)
  }
  </code></pre>
  
  <p><strong>Updated</strong></p>
  
  <p>I have changed the function GetProducts as follows:</p>
  
  <pre><code>public ActionResult GetProducts(decimal customerFunds)
  {
      var products = _repository.GetProducts(customerFunds).Select(p =&gt; new { p.ProductId, p.ProductName }).OrderBy(p =&gt; p.ProductName);
  
      return Json(products, JsonRequestBehavior.AllowGet);
  }
  </code></pre>
  
  <p>The Index.cshtml is now as follows:</p>
  
  <pre><code>@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { role = "form" }))
  {
      @Html.TextBoxFor(m =&gt; m.CustomerFunds)        
      &lt;select id="ProductId"&gt;
          &lt;option value="0"&gt;Please select a Product&lt;/option&gt;
      &lt;/select&gt;
  }
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('#ProductId').hide();
          $('#CustomerFunds').blur(function () {
              var customerFunds = $(this).val();
              if (propertyValue.length &gt; 0) {
                  $.getJSON('/Home/GetProducts', { customerFunds: customerFunds }, function (data) {
                      $('#ProductId').show();
                      $('#ProductId option').remove();
                      $('#ProductId').append('&lt;option value="0"&gt;Please select a Product&lt;/option');
                      for (var i = 0; i &lt; data.length; i++) {
                          $('#ProductId').append('&lt;option value="' + data[i].ProductID + '"&gt;' + data[i].ProductName + '&lt;/option');
                      }
                  }).fail(function () {
                      debugger;
                      alert('Error getting Products');
                  });
              }
              else {
                  $('#ProductId option').remove();
                  $('#ProductId').append('&lt;option value="0"&gt;Please select a Product&lt;/option');
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Once data has been entered into <code>CustomerFunds</code> and the TAB key is pressed, the dropdown appears and is populated.</p>
  
  <p>However, when viewing the source HTML of the page once the dropdown is populated, the actual select list only shows:</p>
  
  <pre><code>&lt;select id="ProductId"&gt;
      &lt;option value="0"&gt;Please select a Product&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Despite the page actually rendering the list, the selected value of the dropdown is NOT passed into the model and therefor the Model Validation fails and I have no idea why.</p>
  
  <p><strong>Updated</strong></p>
  
  <p>Thanks to markpsmith the select for <code>ProductId</code> should be as follows:</p>
  
  <pre><code>&lt;select id="ProductId" name="ProductId"&gt;
      &lt;option value="0"&gt;Please select a Product&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>