如何在AJAX调用中存储下拉值？

Question

我有一个表格，我有一个下拉列表。下拉列表将在AJAX调用中填充。有一个按钮，单击该按钮发送AJAX调用并将要填充的数据作为选项返回到下拉列表。现在，如果选择该选项并成功提交表单，则所选值将存储在数据库中。

但是，如果我在下拉列表中选择一个选项，如果我的表单中存在一些验证问题，那么在提交时，页面会显示错误并“刷新”。这导致在AJAX调用期间填充的选项消失，因为没有再次调用Ajax来填充列表。

因此，如何在第一次AJAX调用期间存储该值，以便在页面刷新时，存储或填充该值。

如果列表是手动填充的，如果我事先知道选项，我可以将选定的值存储在隐藏变量中，但我不能在这里做。

这是我的AJAX功能：

$.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 < data.ExteriorColor.Data.length; i++) {
       //This is the drop down list which is populated
        $("#Exterior_Color").append($("<option></option>").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");
  }
});

Answer 1

尝试localstorage，在ajax调用成功后使用它。

保存下拉对象：

//SAVING (put after the ajax call)

var myList= $("#Exterior_Color");

// Put the object into storage
localStorage.setItem('myList', JSON.stringify(myList));

还原部分：

//RESTORING (put after the page refresh)

// Retrieve the object from storage
var retrievedMyList = localStorage.getItem('myList');

console.log('myList: ', JSON.parse(retrievedMyList ));