我有以下代码:
var LWTable = {
'6': [200, 200, 220],
'8': [220, 220, 240],
'10': [240, 240, 260],
'12': [260, 260, 290],
'15': [290, 310, 340],
'18': [330, 360, 400],
'21': [385, 420, 460],
}
var plengthOptions = '';
Object.keys(LWTable).forEach(function(key) {
plengthOptions += '<option value="' + key + '">' + key + ' in.</option>';
});
$('#plength').append(plengthOptions).change(function() {
var pwidthOptions = '';
LWTable[this.value].forEach(function(width, i) {
pwidthOptions += '<option value="Width' + (i + 1) + '">Width' + (i + 1) + ' (' + width + ')</option>';
});
$('#pwidth').html(pwidthOptions);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="plength" id="plength"></select>
<select name="pwidth" id="pwidth"></select>
上面的效果很好(另请参阅jQuery Replace value in select 这取决于其他选择框)并且在 $( document ).ready(function() 但是..每当我重新加载页面时,我选择的任何内容都不再存在..它重置为默认值,这不是我想要的。如何让它“记住”值?我假设我需要使用 localStorage.getItem 和 localStorage.setItem,但是,我不知道如何使用。我尝试了一些方法,导致整个事情不再工作..
我如何/在哪里执行 getItem(获取正确的值)以及我在哪里执行 setItem,以便在值更改时设置它?
我在所有项目中都使用以下内容,因此我所要做的就是添加data-local-key="some-key"
到我想“记住”其价值的任何元素中。(不要忘记some-key
为每个元素更改为有意义的东西并且与众不同,这样它们就不会在路上重叠。
$(document).on('blur','[data-local-key]',function(){
var $this=$(this);
if (window.localStorage) {
window.localStorage.setItem($this.data('local-key'), $this.val());
}
});
$('[data-local-key]').each(function(){
var $this=$(this);
$this.val(window.localStorage.getItem($this.data('local-key')));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" data-local-key="some-key" id="">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
请注意,我没有将它与复选框一起使用,不确定是否可行,但我很少使用复选框,因此这不是问题。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句