页面刷新后保留下拉列表的选定值 [英] Keep selected value of drop down list after page refresh

问题描述

我有一个按钮，可以根据几个下拉值中的选择来过滤列表.但是，我遇到了一个问题，即单击按钮后，页面将刷新，并且下拉值重置为默认值.如何确保刷新后所选值始终保留在下拉菜单中?

I have a button to filter a list based on the selections from several drop-down values. However I am running into an issue whereby once the button is clicked, the page refreshes and the drop-down values are reset to the default. How could I ensure that after the refresh, the selected values persist on the drop-down?

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

有关如何处理的任何建议?谢谢.

Any suggestions on how this could be handled? Thanks.

推荐答案

您可以使用HTML5 localStorage api(

You can use the 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 );
});

希望这会有所帮助.随时通知我.

Hope this helps. Keep me posted.

这篇关于页面刷新后保留下拉列表的选定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！