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

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按鈕導航回此頁面時，如果要保留該值，該怎么辦？ 這是我的帖子： 在事件window.history.back（） - JavaScript上保留動態創建的DropDown列表的選定值