使用 JavaScript 将所选值保留在下拉列表中答案

【问题标题】：with JavaScript Keep selected value in dropdown list使用 JavaScript 将所选值保留在下拉列表中
【发布时间】：2013-02-14 21:28:47
【问题描述】：

我有以下下拉列表：

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

如果我选择其中一个选项，即使我更新页面，它也应该保持被选中作为主要选项。例如，如果我选择男性，下拉列表应将男性保持为选定选项，并且只有当我用鼠标单击它时才会更改。如何在 JavaScript 中做到这一点？

【问题讨论】：

你的意思是，当你刷新？这里是否涉及任何服务器端语言？
localStorage（如果是旧 IE，则为 dataStorage）或作为最后一个资源 cookie（除非您想在服务器端存储用户首选项）（也请阅读 this）
是的，当我刷新页面时。我也在用php
js 也可以解析查询字符串中的数据。因此可以将表单操作设置为 GET。但是如果这是js，为什么不直接把它做成ajax调用而不刷新页面呢？
如果您使用 PHP，那么您通常使用 PHP 而不是 javascript 重绘组件。或者使用 Ajax 并使用 JS 并避免刷新

标签： javascript drop-down-menu

【解决方案1】：

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

$(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());
    });
})

【讨论】：

【解决方案2】：

HTML 页面是无状态的——这意味着它们不记得状态。为了执行您所描述的操作，我们通常让服务器端代码根据先前提交的表单的值输出不同的 HTML。

有使用 URL 哈希的纯 JavaScript 方法，但无论如何您都需要一些服务器端代码来运行您的网站。

【讨论】：

【解决方案3】：

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

【讨论】：