我有麻烦弄清楚如何使用会话存储列表项。这似乎不工作,因为样式,我不能使用基本的选择/选项:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span data-bind="label">Day</span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" name="country">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
var item = window.localStorage.getItem('country');
$('ul[name=country]').val(item);
$('ul[name=country]').change(function() {
window.localStorage.setItem('country', $(this).val());
});
小提琴
基本的click()
事件。你不应该使用change()
:
$('ul[name=country] li').click(function() {
window.localStorage.setItem('country', $(this).text());
});
检查控制台,使用localStorage.getItem("country")
。
小提琴:https://jsfiddle.net/5z0nkdjb/
您试图在ul
标签中使用val
,并且它没有value
属性。
另外,你试图在它上使用change
事件,它也没有那个事件。
首先,你必须明白你在做什么。你可能从其他地方复制了这个下拉选择器,但你不知道它在做什么。
它通过在button
内使用label
来模拟select
行为,并且任何时候单击ul
标记内的li
,您的代码将label
文本更改为li
的文本。
因此,首先,当页面加载时,您必须查看localStorage中是否已经存在任何内容,如果存在,则必须将标签的文本更改为保存在localStorage中的值。
var item = localStorage.getItem('country');
if (item) $('span[data-bind="label"]').text(item);
之后,在li
的单击事件中,必须将单击的li
的文本保存到localStorage中,以便以后持久化。
// Dropdown picker
$('.dropdown-menu').on('click', 'li', function(e) {
var $target = $(e.currentTarget);
/* the rest of your code */
localStorage.setItem('country', $target.text());
});
我已经更新了你的小提琴与代码工作。