title: Jquery returns value "undefined" .net core
body: <p>I want to populate second dropdown from first one.</p>
  
  <p>It all works but city names and values just returns "undefined". *Number of cities returns correct but the name and value are always "undefined". *</p>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>    [HttpPost]
      public ActionResult getCityJson(string stateId)
      {
          int _stateid = Convert.ToInt32(stateId);
          List&lt;Cities&gt; objcity = new List&lt;Cities&gt;();
          objcity = _db.Cities.Where(m =&gt; m.stateID == _stateid).ToList();
          SelectList obgcity = new SelectList(objcity, "CityID", "CityName", 0);
          return Json(obgcity);
      }
  </code></pre>
  
  <p><strong>View Page:</strong></p>
  
  <pre><code>    $("#istateid").change(function () {
          var id = $("#istateid").val();
          $.ajax({
              url: '@Url.Action("getCityJson", "Home")',
              data: { stateId: id },
              cache: false,
              type: "POST",
              success: function (data) {
                  var markup = "&lt;option value='0'&gt;Select City&lt;/option&gt;";
                  for (var x = 0; x &lt; data.length; x++) {
                      markup += "&lt;option value=" + data[x].Value + "&gt;" + data[x].Text + "&lt;/option&gt;";
                  }
                  $("#icityid").html(markup).show();
              },
              error: function (reponse) {
                  alert("error : " + reponse);
              }
          });
      });
  </code></pre>
  
  <p>I also tried Public JsonResult and return JsonResult and Public Selectlist and return SelectList but none of them worked.</p>
  
  <p><strong>And I also tried this:</strong></p>
  
  <pre><code> $("#istateid").change(function () {
   $.ajax({
   type: "POST",
   url: '@Url.Action("getCityJson", "Home")',
   data: { stateId: $("#istateid &gt; option:selected").attr("value") },
   success: function (data) {
     var items = [];
     items.push("&lt;option&gt;--Choose Your City--&lt;/option&gt;");
     $.each(data, function () {
         items.push("&lt;option value=" + this.Value + "&gt;" + this.Text + "&lt;/option&gt;");
     });
     $("#icityid").html(items.join(' '));
    }
  }) });
  </code></pre>
  
  <p>I recieve this in browser:
  <strong>(TypeError: data[x] is undefined.)</strong></p>
  
  <pre><code>    $("#istateid").change(function () {
          var id = $("#istateid").val();
          $.ajax({
              url: '/Home/getCityJson',
              data: { stateId: id },
              cache: false,
              type: "POST",
              success: function (data) {
                  var markup = "&lt;option value='0'&gt;Select City&lt;/option&gt;";
                  for (var x = 0; x &lt; data.length; x++)
                  { markup += "&lt;option value=" + data[x].CityID + "&gt;" + data[x].CityName + "&lt;/option&gt;"; }
                  $("#icityid").html(markup).show();
              },
              error: function (reponse) {
                  alert("error : " + reponse);
              }
          });
      });
  
  &lt;option value="0"&gt;Select City&lt;/option&gt;
  &lt;option value="undefined"&gt;undefined&lt;/option&gt;
  &lt;option value="undefined"&gt;undefined&lt;/option&gt;
  &lt;option value="undefined"&gt;undefined&lt;/option&gt;
  </code></pre>