页面刷新后保留下拉列表的选定值

Keep selected value of drop down list after page refresh

本文关键字：下拉列表 保留 刷新      更新时间：2023-09-26

我有一个按钮，可以根据几个下拉值中的选择筛选列表。然而，我遇到了一个问题，单击按钮后，页面将刷新，下拉值将重置为默认值。如何确保刷新后，所选的值在下拉列表中保持不变？

<div><select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
  </select>
   <select>
    <option value="ford">ford</option>
    <option value="chevy">Chevy</option>
    <option value="ram">Ram</option>
    <option value="jeep">Jeep</option>
   </select>
   <button id="button" onclick="filterMyList()">Filter</button>
  </div>

关于如何处理这个问题，有什么建议吗？谢谢

您可以使用HTML5 localStorage api(http://www.w3schools.com/html/html5_webstorage.asp)

案例示例：

$(document).ready(function() {
    // On refresh check if there are values selected
    if (localStorage.selectVal) {
            // Select the value stored
        $('select').val( localStorage.selectVal );
    }
});
// On change store the value
$('select').on('change', function(){
    var currentVal = $(this).val();
    localStorage.setItem('selectVal', currentVal );
});

希望这能有所帮助。随时通知我。

相关文章：