title: Jquery Select load back after refresh page
body: <p>Well, It's a simple one and I know there are a lot of source about this thing.<br>
  I've a jquery script like:</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
          $("#CountryId").change(function () {
              $.get("@Url.Action("GetStateList","Controllers1")", { sOId: $("#CountryId").val() }, function (data) {
                  $("#StateId").empty();
                  $.each(data, function (index, row) {
                      $("#StateId").append("&lt;option value='" + row.PersonnelNumber + "'&gt;" + row.Name + "&lt;/option&gt;")
                  });
              });
          })
      });
  &lt;/script&gt;
  
  public JsonResult GetStateList(string sOId)
      {
          string sPositionNumber = Session["xPersonnelNumber"].ToString();
  
          db.Configuration.ProxyCreationEnabled = false;
          List&lt;Employee&gt; StateList = db.Employees.Where(x =&gt; x.OrganizationNumber == sOId &amp;&amp; x.Name != null).OrderBy(o =&gt; o.Name).ToList();
          return Json(StateList, JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p>After the page refresh, the <code>StateId</code> option is empty. How can I keep the option list after the page is refresh? If I remove the <code>.Empty()</code>, it will append another option. It's cascading dropdown using MVC .NET</p>
  
  <p>Really appreciated.</p>