javascript - 如何在页面加载后更改 ‘selected’ 选项

Question

这个 fiddle 显示下拉列表从“One”开始。我想要发生的是，下拉列表从我的默认值(一)开始，然后一旦我选择不同的选项(二)，当我刷新页面时，下拉列表从“二”而不是“一”开始。

https://jsfiddle.net/USERALPHA32/7r59xkrf/

它应该像获取新选择的值并将其设为新的默认选择选项一样简单。我尝试了几种方法，但无法使其发挥作用。 (下面的代码不是 fiddle 的一部分，而是仅显示我在实际代码中尝试过的概念)

var nSel = $(‘option:selected’, this).detach();
$(this).prepend(nSel);
console.log(nSel.val());
//The above ’nSel’ is the correct value I’m clicking on.

//None of these below worked.

// $('#dropdown option:selected').val(nSel.val());
// console.log($('#dropdown option:selected').val(nSel.val()));
// $("#dropdown").val(nSel.val());
// $("#dropdown").val();
// console.log($("#dropdown").val(nSel.val()));
// $("#dropdown").find(':selected').val();
// $('select').find('option', nSel.val());
// $('#dropdown option:selected', nSel.val());
// $('#dropdown option:selected').val(nSel);

Answer 1

如果您希望刷新后仍保存数据， 您必须使用本地存储。

将您的选择保存在 localStorage 中并在页面加载时获取他。

当用户选择一个选项时，您可以使用以下代码保存它:

localStorage.setItem("key", "yourOption");

在文档加载时，您检查 key 是否存在:

var data = localStorage.getItem("key");
if(data){
    // here you change dropdown value.
}

您可以选择是否要删除 localStorage 中的值，以便在下一页刷新时它将被清除。