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

How to retain a value of dropdown using JS?

本文关键字：下拉列表 保留 何使用 JS      更新时间：2023-09-26

我有三个下拉菜单和一个提交按钮。现在，我试图在用户单击输入提交后保留每个下拉框的值。但我有Jquery不工作。当用户单击下拉菜单时，我使用PHP显示下拉菜单的输出。

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

如何解决这个问题?见柱塞

JS: 

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

使用all选项使用本地存储;

$("#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
    }
}

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

您可以通过使用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");

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

如果由于某些原因无法实现，您可以使用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。

EDIT:如果不需要浏览器刷新，可以使用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
    });
    // ...
});
//...

虽然我认为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将反映用户所做的最新选择。

相关文章：