title: How do I store drop down value in AJAX call?
body: <p>I am having a form in which I have a drop down list. The drop down list is getting populated inside an AJAX call. There is a button, clicking on which sends an AJAX call and returns data to be filled as options to the drop down list.
  Now, If the option is selected and the form is submitted successfully, then the selected value gets stored in the database.</p>
  
  <p>But, If I select an option in the drop down and if there are some validation issues in my form, then on submit, the page shows the error and it "refreshes". This leads to the options which were populated during AJAX call to disappear since there is no ajax call again to populate the list. </p>
  
  <p>So, How do I store the value during the first AJAX call such that on page refresh, the value is stored or populated.</p>
  
  <p>If the list were populated manually i.e If I knew the options beforehand, I could have stored the selected value in a hidden variable but I can't do it here.</p>
  
  <p>Here is my AJAX function:</p>
  
  <pre><code>$.ajax({
    type: "POST",
    dataType: 'json',
    url: "/Controller/Action",
    data: {
      param: param,
    },
    success: function(data) {
      if (data.Response == "Unsuccessful") {
        console.log("Unsuccessful");
      } else if (data.Response == "Successful" || data.Response == "ConditionallySuccessful") {
        for (var i = 0; i &lt; data.ExteriorColor.Data.length; i++) {
         //This is the drop down list which is populated
          $("#Exterior_Color").append($("&lt;option&gt;&lt;/option&gt;").val(data.ExteriorColor.Data[i]).html(data.ExteriorColor.Data[i]));
          console.log(data.ExteriorColor.Data[i]);
        }
     }
    },
    error: function(result) {
      console.log("Error while fetching data");
    }
  });
  </code></pre>