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