如何使用 JS 保留下拉列表的值？

Question

我有一个带有 1 个提交按钮的三个下拉菜单。现在，我试图在用户单击输入提交后保留每个下拉列表的值。但是我拥有的 Jquery 无法正常工作。当用户单击它时，我使用 PHP 来显示下拉列表的输出。

注意：当用户点击输入提交时页面会刷新。

如何解决这个问题？见plunker

JS：

$(document).ready(function(){
    $('#dropdown').change(function(){
        var option = $(this).find('option:selected').val();
        $('#dropdown').val(option);
    });

});

Answer 1

使用所有选项的本地存储；

$("#dropdown").change(function(){

      var html=$("#dropdown").html();
      localStorage.setItem("myapp-selectval",html);

      localStorage.setItem("myapp-selectvalselected",$("#dropdown").val());              //to retain selected value
})

现在正在加载文档；

window.onload=function()
{
    if(localStorage.getItem("myapp-selectval")!="" && localStorage.getItem("myapp-selectval")!=undefined)
    {
        $("#dropdown").html(localStorage.getItem("myapp-selectval"));

        $("#dropdown").val(localStorage.getItem("myapp-selectvalselected"));                 //to get previously selected value
    }
}

正如我在评论中所说，这不是一个好的解决方案。

Answer 2

您可以使用select 元素中的model 属性轻松获取值。

首先像这样添加一个onclick函数

<input type="submit" name="submit" value="Submit" onclick="getValues()"/>

然后获取按钮提交时的值（完整代码）Plunkr

我查看了您的代码，设置选择框渲染的方式我们必须显式调用 updateSelect() 函数才能使选项正常工作。此功能使您的选择框“动态”。

var first = localStorage.getItem("firstDropDown");
var second = localStorage.getItem("secondDropDown");
var third = localStorage.getItem("thirdDropDown");

if(first !== null && second !== null && third !== null) {
  setValues(); //this should come after getting  the values above
}

function getValues() {
  var first = document.getElementsByTagName("SELECT")[0].getAttribute("model");
  var second = document.getElementsByTagName("SELECT")[1].getAttribute("model");
  var third = document.getElementsByTagName("SELECT")[2].getAttribute("model");

  localStorage.setItem("firstDropDown", first);
  localStorage.setItem("secondDropDown", second);
  localStorage.setItem("thirdDropDown", third);
}

//on load when this function is called globally, the values from the localStorage will be set to the dropdown values.
function setValues() {
  //for first dropdown
  document.getElementsByTagName("SELECT")[0].setAttribute("model", first); 
  document.getElementsByTagName("SELECT")[0].value = first;
  updateSelect(document.getElementsByTagName("SELECT")[0]);
  //for second dropdown
  document.getElementsByTagName("SELECT")[1].setAttribute("model", second);
  document.getElementsByTagName("SELECT")[1].value = second;
  updateSelect(document.getElementsByTagName("SELECT")[1]);
  //for third dropdown
  document.getElementsByTagName("SELECT")[2].setAttribute("model", third);
  document.getElementsByTagName("SELECT")[2].value = third;
  updateSelect(document.getElementsByTagName("SELECT")[1]);
}

要保留价值，您别无选择，只能像这样使用window.localStorage -

localStorage.setItem("firstDropDown", first);
localStorage.setItem("secondDropDown", second);
localStorage.setItem("thirdDropDown", third);

然后取值

var first = localStorage.getItem("firstDropDown");
var second = localStorage.getItem("secondDropDown");
var third = localStorage.getItem("thirdDropDown");

Answer 3

如果用户要刷新页面，最好的办法是让服务器发送用户刚刚在新页面加载时提交的值。

如果由于某种原因无法做到这一点，您可以使用localStorage：

$(document).ready(function(){
    var prevVal = localStorage.getItem('selectValue');
    prevVal && $('#dropdown').val(prevVal);

    $('#dropdown').change(function(){
        var option = $(this).val();
        localStorage.setItem('selectValue', option);
    });

});

请记住，并非所有浏览器都支持此 API。

编辑：如果不需要浏览器刷新，可以使用Ajax：

// ...
$('#myForm').submit(function (event) {
    event.preventDefault();
    var option = $('#dropdown').val();
    var fd = new FormData();
    fd.append('dropdown', option);
    $.ajax('/path/to/form/target/', {
        method: 'POST',
        formData: fd
    });
    // ...
});
//...

Answer 4

虽然我认为 OP 的问题要求 JS 解决方案，但我确实想提出其他问题，因为我也在寻找解决相同问题的方法。然而，我最终以我认为令人满意的方式解决了它。

在我的情况下，我使用 Flask 作为后端，但我相信解决方案至少应该与其他用例类似。

在下拉列表所在的 HTML 中，我从后端传递了一个变量，该变量最初设置为我选择的某个默认值。我们称这个变量为 default_var_set_in_backend。这最终将被提供给 HTML，如下所示：

<select name="some_name_you_want" onchange="this.form.submit()">
    <option selected="selected">{{ default_var_set_in_backend }}</option>

一旦用户对下拉列表值进行了更改（在我的情况下是 GET 请求），我将变量 default_var_set_in_backend 更新为等于这个新选择。现在，一旦页面刷新，HTML 将反映用户所做的最新选择。