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');

我实际上正在检索从localstorage重新加载页面之前选择的作者的值：

auid = localStorage.getItem("latestAuthor");

有人可以告诉我这是如何与示例代码段一起使用，让我从下拉菜单中选择一个选项，并在页面重新加载时保持选择相同的选项，但用户可以从下拉列表中选择另一个选项菜单随时都可以。

Answer 1

在页面加载时，一旦存在该选择框，并且从本地存储中检索auid后，请执行以下操作：

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

if就在那里，因为如果您从未在本地存储中设置该值，那么您将从getItem获得回复。

附注：获取值时，请勿使用prop('value')。使用.val：

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

完整示例on jsFiddle（因为Stack Snippets不允许本地存储☹）。这假设它位于HTML末尾的script标记中，就在结束</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＆＃34; DOM ready＆＃34;回调：

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")的结果缓存在一个变量中，但是在页面加载时执行两次 nothing 。）

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>

javascript - 选择选项jquery问题

2 个答案: