Question

我有一个提交按钮的三个下拉列表。现在，我尝试在用户点击输入提交后保留每个下拉列表的值。但是我的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

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

如果出于某种原因这是不可能的，您可以使用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 3

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

首先添加一个onclick函数，如此

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

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

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

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]);
}

要保留该值，您别无选择，只能像{ - 1}}一样使用

window.localStorage

然后获取值

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

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

如何使用JS保留下拉值？

4 个答案: