如何在 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 ));