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