javascript - 选择选项 jquery 问题答案

【问题标题】：javascript - select option jquery issuejavascript - 选择选项 jquery 问题
【发布时间】：2016-05-16 11:53:33
【问题描述】：

在我的应用程序中，我想让用户随时从下拉菜单中选择一个选项。但是当页面重新加载时，它会回到默认值（下拉列表中的第一个元素）。

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

我实际上是通过以下方式从本地存储中检索在页面重新加载之前选择的作者的值：

auid = localStorage.getItem("latestAuthor");

有人能告诉我这一切如何与示例代码 sn-p 结合在一起，让我从下拉菜单中选择一个选项，并且当页面重新加载时相同的选项保持选中状态，但用户可以从也可以随时下拉菜单。

【问题讨论】：

var auid = $('#tabs .author option:selected').prop('value'); 与这个有限的 html 是相同的值var auid = $('.author').val();

标签： javascript jquery html

【解决方案1】：

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

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

if 之所以存在，是因为如果您从未在本地存储中设置过该值，那么您将从getItem 获得返回值。

旁注：获取值时，不要使用prop('value')。使用.val：

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

完整示例on jsFiddle（因为堆栈片段不允许本地存储☹）。这假定它位于 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的“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")的结果缓存在一个变量中，但是在页面加载时重复两次是没什么。）

【讨论】：

感谢 sn-p...它能够检索以前的值并从下拉菜单中选择它，但我无法从下拉菜单中更改值（更改为新选项）菜单...即使在单击其他选项后，它仍保持在同一选项上...！
@Vasa：不是上面的代码。这个问题不会发生（试试小提琴看看）。您必须在错误的时间进行呼叫设置值。仔细看看我在上面的代码中什么时候这样做。
顺便提一下，我的实际陈述是这样的： $('#tabs' + rId + ' .pool .author') 但为了提问，我简化了它......如果那样的话改变什么？
@Vasa：不是，不是。
除非rdl 的值附加到标签使其成为标签的无效ID，例如'#tabsidonotexist .pool .author' - 当然你必须在代码的两个地方都这样做

【解决方案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，您应该在 fiddle 上进行测试。

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>

【讨论】：