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 标签具有数值，当我重新加载页面时，它所保留的是与存储在 sessionStorage 中的值的索引相关的 option。

例子：

<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 );