title: Cascaded Drop Down List with search box
body: <p>I'm trying to use cascaded Drop Down for a project, but with a bit of a twist. For Power Users, they can enter a stock code and search. The retrieved information then updates the Parent Drop Down and the cascaded Drop Down selection.</p>
  
  <p>Using a click event, I can search the entered value and it returns all the needed information. I can update the Parent to Display the correct information, But unable to get the child to display. It's stuck on showing " -- Select --" Populating the drop down's with data to select from works great. Could really use some insight and help.. Got myself stumped on the child. Thanks..</p>
  
  <p>I followed this example to setup the Dropdowns. <a href="https://stackoverflow.com/questions/38340962/asp-net-mvc-cascading-dropdown-lists">asp.net MVC cascading dropdown lists</a> </p>
  
  <pre><code>&lt;Controller&gt;
  public ActionResult Create()
          {
              ViewData["User"] = User.Identity.GetUserName();
              BindPartType();
              return View();
          }
   public void BindPartType()
          {
              partsmanagementEntities5 parttypelist = new partsmanagementEntities5(); //Parts
              var parttype = parttypelist.parttypes.ToList();
              List&lt;SelectListItem&gt; pli = new List&lt;SelectListItem&gt;();
              pli.Add(new SelectListItem { Text = "--Select Catagory--", Value = "0" });
              foreach (var m in parttype)
              {
                  pli.Add(new SelectListItem { Text = m.PartType1, Value = m.idPartType.ToString() });
                  ViewBag.PartType = pli;
              }
          }
          public JsonResult GetInventory(int? id)
          {
              partsmanagementEntities5 partlist = new partsmanagementEntities5();
              var ddlpart = partlist.parts.Where(x =&gt; x.PartType == id).ToList();
              List&lt;SelectListItem&gt; lipart = new List&lt;SelectListItem&gt;();
             lipart.Add(new SelectListItem { Text = "--Select Inventory--", Value = "0" });
              if (ddlpart != null)
              {
                  foreach (var x in ddlpart)
                  {
                      lipart.Add(new SelectListItem { Text = x.PartDescription, Value = x.idParts.ToString() });
                  }
              }
              return Json(new SelectList(lipart, "Value", "Text", JsonRequestBehavior.AllowGet));
          }
   public JsonResult Check(string id)
          {
              partsmanagementEntities5 partlist = new partsmanagementEntities5();
              StringBuilder test = new StringBuilder();
              if(id != null &amp;&amp; id != "")
              {
                  foreach (char c in id)
                  {
                      if (!char.IsNumber(c))
                          test.Append(c);
                  }
  
                  var ddlpartnumber = partlist.parts.Where(x =&gt; x.PartNumber == id.ToString());
                  PartDetails li = new PartDetails();
                  foreach (var item in ddlpartnumber.ToList())
                  {
                      li.PartNumber = item.PartNumber;
                      li.PartPrice = item.PartPrice;
                      li.idParts = item.idParts;
                      li.EHF = item.EHF;
                      li.PartDescription = item.PartDescription;
                      li.PartImage = item.PartImage;
                      li.partImageContentType = item.partImageContentType;
                      li.unit = item.unit;
                      li.PartType = item.PartType;
                      li.VendorPartNumber = item.VendorPartNumber;                  
                  }
                  return Json(li, JsonRequestBehavior.AllowGet);
              }
              return Json("", JsonRequestBehavior.AllowGet);
          }
  
  
  &lt;View&gt;
  
  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;td style="padding-left:0.8ex;padding-top:0.8ex"&gt;@Html.Label("Catagory: ")&lt;/td&gt;
                          &lt;td&gt;
                              @Html.DropDownListFor(model =&gt; model.PartType, ViewBag.PartType as List&lt;SelectListItem&gt;, new { style = "width: 800px;" })
                              @Html.ValidationMessageFor(model =&gt; model.PartType, "", new { @class = "text-danger" })
                          &lt;/td&gt;
                          &lt;td style="padding-left:6ex;padding-top:0.8ex"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td style="width:1px;white-space:nowrap;padding-left:0.8ex"&gt;@Html.Label("Inventory:  ")&lt;/td&gt;
                          &lt;td&gt;
                              @Html.DropDownListFor(model =&gt; model.PartNumber, new SelectList(string.Empty, "Value", "Text"), "--Select Inventory--", new { style = "width:900px" })
                              @Html.ValidationMessageFor(model =&gt; model.PartNumber, "", new { @class = "text-danger" })
                          &lt;/td&gt;
  
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td style="width:1px;white-space:nowrap;padding-left:6ex"&gt;@Html.Label("Or choose:")&lt;/td&gt;
  
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td style="width:1px;white-space:nowrap;padding-left:0.8ex"&gt;@Html.Label("Enter Valid Part #:  ")&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" name="CheckPartNumber" id="CheckPartNumber"&gt;  &lt;input type="button" id="Search" value="Search" class="btn btn-default" /&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
  
  &lt;script src="~/Scripts/jquery-3.0.0.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function () {
          $("#PartType").change(function () {
              $("#PartNumber").empty();
              $.ajax({
                  type: 'POST',
                  url: '@Url.Action("GetInventory", "partrequests")',
                  dataType: 'json',
                  data: { id: $("#PartType").val() },
                  success: function (PartNumber) {
                      $.each(PartNumber, function (i, PartNumber) {
                          $("#PartNumber").append('&lt;option value="'
                                                     + PartNumber.Value + '"&gt;'
                                               + PartNumber.Text + '&lt;/option&gt;');
                      });
                  },
                  error: function (ex) {
                      alert('Failed.' + ex);
                  }
              });
              return false;
          })
      });
  
  $(document).ready(function () {
  
          $("#Search").click(function () {
               $.ajax({
                  type: 'POST',
                  url: '@Url.Action("Check","partrequests")',
                  dataType: 'json',
                  data: { id: $("#CheckPartNumber").val() },
                  success: function (Data) {
                  var selectedValue = Data.PartType
                  $('#PartType option').map(function () {
                   if ($(this).val() == selectedValue) return this;
                  }).attr('selected', 'selected').change();
                  var selectedValue2 = Data.idParts;
                  $('#PartNumber option').map(function () {
                   if ($(this).val() == selectedValue2) return this;
                  }).attr('selected', 'selected');
                  },
                  error: function (ex) {
                      alert('Failed.' + ex);
                  }
              });
              return false;
          })
      });
  &lt;/script&gt;
  </code></pre>