JavaScript/HTML - 保持选择下拉列表中的数值

Question

我保留了我的 option 的值使用此代码选择的 HTML 标记:

document.getElementById('select_itens_op').onchange = function() {
   sessionStorage.setItem('pagina', document.getElementById('select_itens_op').value);
};

if (sessionStorage.getItem('pagina')) {
   document.getElementById('select_itens_op').options[sessionStorage.getItem('pagina')].selected = true;
}

它工作得很好，但在我的一个标签中我遇到了一个问题。 option标签有数值，当我重新加载页面时，它被保留的是 option与存储在 sessionStorage 中的值的索引相关.

例子:

<select name="select_itens_op" id="select_itens_op" ">
   <option value="">Página</option>
   <option value="2">2</option>
   <option value="4">4</option>
   <option value="8">8</option>
   <option value="10">10</option>
</select>

如果我选择值为 2 的选项，这个值将存储到 sessionStorage 中，但是当我刷新页面时，选择的选项将是值为 4 的选项。 , 因为它是 position 2的名单。如果我选择 4存储的值将是 4并且返回的选项将是 10 , 等等。

如果我使用字符串值，效果很好，前提是我添加 ids这些标签，但我需要这些数值。我已经进行了研究，但没有找到合适的答案。

解决这个问题的最佳方法是什么？

Answer 1

直接获取SelectElement.value:

const el_op = document.getElementById('select_itens_op');

// Set on init
if (sessionStorage.pagina) el_op.value = sessionStorage.pagina;
// Store on change
el_op.addEventListener('change', () => sessionStorage.pagina = el_op.value );