jQuery记住动态生成的Selectbox的值

Question

我有以下代码：

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替换值选择，具体取决于其他选择框(，并且在$(document(中。dready(function((但是，每当我重新加载页面时，我选择的不再存在了。它将重置为默认值，这不是我想要的。我该如何"记住"该值？我假设我需要使用localstorage.getItem和localstorage.setitem，但是，我不知道如何。我尝试了一些事情，导致整个事情不再起作用了。

我该如何/在哪里进行getItem(拾取正确的值(，我在哪里进行setItem，因此将其设置在值更改时？

Answer 1

我在所有项目中使用以下内容，所以我要做的就是将 data-local-key="some-key"添加到我想记住的任何元素中。它的价值。(不要忘记将some-key更改为每个元素有意义的东西，并具有独特性，以免在道路上重叠。

请参阅工作JSFIDDLE

  $(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>

请注意，我还没有使用它与复选框一起使用，但不确定是否有效，但是我很少使用复选框，因此它不是问题。

Answer 2

在构建选项时，您会调用getItem()，而在选择存储新值的change事件中setItem()。

您的代码为我直接编辑它做了很多事情，但这是一个基本示例。

$(document).ready(() => {
    const lastValue = localStorage.getValue('lastValue');
    const values = [1,2,3,4,5];
    const $select = $('<select>');
    values.forEach(value => $select.append(`
        <option value="${value}">${value}</option>
    `);
    $select.val(lastValue);
    $select.change(() => { 
        localStorage.setValue('lastValue', $select.val());
    });
});

在您的特殊情况下，您将有两层看起来像，一个用于您的#plength，一个用于#pwidth，但这个想法仍然相同：将select的值设置为localStorage.getItem('key')，然后在更改上呼叫localStorage.setItem('key', $yourSelect.val())存储该值。

如果您需要更多的帮助，请努力使其工作并使用更新的代码开始新问题。