JavaScript-選擇選項jQuery問題

Question

在我的應用程序中，我想讓用戶隨時從下拉菜單中選擇一個選項。 但是，當頁面重新加載時，它返回到默認值（下拉列表中的第一個元素）。

我的HTML看起來像這樣：

<select class="author">
    <option value="aaa">aaa</option>
    <option value="bbb">bbb</option>
    <option value="ccc">ccc</option>
</select>

在我的JavaScript中，我使用以下命令讓用戶選擇一個選項：

auid = $('#tabs' .author option:selected').prop('value');

我實際上是通過以下方式檢索從本地存儲重新加載頁面之前選擇的author的值：

auid = localStorage.getItem("latestAuthor");

有人可以告訴我這一切如何與示例代碼片段一起顯示，讓我從下拉菜單中選擇一個選項，並在重新加載頁面時保持選中該選項，但是用戶可以隨時從下拉菜單中選擇另一個選項。也一樣

Answer 1

在頁面加載時，一旦該選擇框存在，並且從本地存儲中檢索到auid ，請執行以下操作：

if (auid !== null) {
    $("#tabs .author").val(auid);
}

之所以存在if是因為如果您從未在本地存儲中設置該值，那么您將從getItem獲得該值。

---

注意：獲取值時，請勿使用prop('value') 。 使用.val ：

auid = $("#tabs .author").val();

---

jsFiddle上的完整示例（因為Stack Snippets不允許本地存儲☹）。 假定它位於HTML末尾的script標記中，就在</body>標記之前（除非有充分的理由，否則應在其中放置</body>標記）。

// Scoping function to avoid global vars
(function() {
    var auid = localStorage.getItem("latestAuthor");
    if (auid !== null) {
        $("#tabs .author").val(auid);
    }
    $("#tabs .author").on("change", function() {
        auid = $(this).val();
        localStorage.setItem("latestAuthor", auid);
    });
})();

如果由於某種原因您不能將script標簽放在最后，則可以使用jQuery的“ DOM ready”回調：

jQuery(function() {
    var auid = localStorage.getItem("latestAuthor");
    if (auid !== null) {
        $("#tabs .author").val(auid);
    }
    $("#tabs .author").on("change", function() {
        auid = $(this).val();
        localStorage.setItem("latestAuthor", auid);
    });
});

（如果要避免執行兩次，可以將$("#tabs .author")的結果緩存在變量中，但是在頁面加載時進行兩次則無濟於事 。）

Answer 2

對我來說很好。

可能的錯字

auid = $('#tabs' .author option:selected').prop('value');
               ^

樣品：

 $(".btn").on("click", function() { var auid = $('#tabs .author option:selected').prop('value'); console.log(auid); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="tabs"> <select class="author"> <option value="aaa">aaa</option> <option value="bbb">bbb</option> <option value="ccc">ccc</option> </select> </div> <button class="btn">Click Me</button> 

另外，有關與LocalStorage集成的示例，請檢查以下代碼：

注意：Stackoverflow不允許訪問localStorage ，您應該在小提琴上對其進行測試。

的jsfiddle

 var _lsKey = "test"; function registerEvents(){ $(".btn").on("click", function() { var auid = $('#tabs .author option:selected').prop('value'); saveValueToLS(_lsKey, auid); }); } function saveValueToLS(key, value){ localStorage.setItem(key, value); } function getValueFromLS(key){ return localStorage.getItem(key); } function initializeSelect(){ var lsVal = getValueFromLS(_lsKey); $(".author").val(lsVal); } function initializePage(){ registerEvents(); initializeSelect(); } initializePage(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="tabs"> <select class="author"> <option value="aaa">aaa</option> <option value="bbb">bbb</option> <option value="ccc">ccc</option> </select> </div> <button class="btn">Click Me</button>