title: Set Selected Value On Cascaded MVC Drop Down List
body: <p>I'm developing an MVC 5 application. Within a Razor View there are two drop down lists. When a value is selected from the first one (<strong>productID</strong>), a JQuery and Ajax call is made to return Json Data which populates the second drop down list (<strong>additionalID</strong>).</p>
  
  <p><strong>Drop Downs</strong></p>
  
  <pre><code>@Html.DropDownListFor(m =&gt; m.productID, Model.ProductList, "Select", new { @class = "form-control" })
  @Html.DropDownListFor(m =&gt; m.additionalID, Enumerable.Empty&lt;SelectListItem&gt;(), "Select", new { @class = "form-control" })
  </code></pre>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>$("#productID").change(ProductChange);
  
  function ProductChange() {
          var val = $("#productID").val();
          var valText = $("#productID option:selected").text();
          if (val == 22 || val == 25 || val == 29 || val == 20) 
          {
              $('#AdditionalProducts').show('fast');
              $('label[for="additionalID"]').html('Please select a ' + valText + ' option');
  
              var dataPost = { productID: val };
              $.ajax({
                  type: "POST",
                  url: '/Proposal/GetAdditionalProducts/',
                  async: false, //This makes the JQuery below wait until $.ajax() call is finished
                  data: dataPost,
                  dataType: "json",
                  error: function () {
                      alert("An error occurred." + val);
                  },
                  success: function (data) {
                      var items = "";
                      $.each(data, function (i, item) {
                          items += "&lt;option value=\"" + item.Value + "\"&gt;" + item.Text + "&lt;/option&gt;";
                      });
  
                      $("#additionalID").html(items);
                  }
              });    
          }
          else
          {
              $('#additionalID').empty(); // clear drop down list
              $('#AdditionalProducts').hide('fast');
          }
      }
  </code></pre>
  
  <p>When editing a record, within the MVC Controller Edit Action I pass values for both <strong>productID</strong> and <strong>additionalID</strong> to the Razor View. Both drop downs appear, and the selected value for productID is set, however, the selected value for additionalID is not set.</p>
  
  <p>Can anyone please help me with how to set the value of the second down drop list?</p>
  
  <p>Thanks in advance.</p>