JavaScript/HTML - 保留 select 下拉列表中的数值 selected

Question

我正在使用以下代码 select 保留我的 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>

如果我 select 选项的值为 2，这个值将存储到 sessionStorage 中，但是当我刷新页面时，选项 selected 将是带有值 4，因为它是列表的 position 2。如果我 select 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 );

JavaScript/HTML - 保留 select 下拉列表中的数值 selected

JavaScript/HTML - Keeping numeric values from select dropdown list selected

html

javascript

session-storage