Question

我有以下下拉列表：

Gender<select name="gender"  id="gender"> 
  <option value=" "> EMPTY </option> 
  <option value="Male">Male</option> 
  <option value="Female">Female</option> 
</select>

如果我选择其中一个选项，即使我续订页面，它仍应保持选为主要选项。例如，如果我选择Male，则下拉列表应将Male作为选定选项，并且只有在我用鼠标单击时才会更改。如何在JavaScript中执行此操作？

Answer 1

这是一个javascript / jquery方式，使用localStorage。如果您要在很多地方执行此操作，可能有方法可以优化此代码。

$(function() {
    var genderValue = localStorage.getItem("genderValue");
    if(genderValue != null) {
        $("select[name=gender]").val(genderValue);
    }

    $("select[name=gender]").on("change", function() {
        localStorage.setItem("genderValue", $(this).val());
    });
})

Answer 2

HTML页面是无状态的 - 这意味着它们不记得状态。为了做你所描述的，我们通常让服务器端代码输出不同的HTML，具体取决于之前提交的表单的值。

使用URL哈希只有JavaScript才能实现此目的，但无论如何，您都需要一些服务器端代码来运行您的网站。

Answer 3

当您通过其后续页面上的EDIT按钮导航回此页面时，如果要保留该值，该怎么办？这是我的帖子： Retain dynamically created DropDown list's selected value on event window.history.back()- JavaScript

使用JavaScript在下拉列表中保留选定的值

3 个答案: