下拉过滤器

Question

我能够在Stackoverflow上找到一个基于过滤器显示HTML“li”元素的solution（参见附件）。基本上基于HTML元素中定义的css类，它填充了您可以选择的下拉列表。

我想修改下面的javascript，以便当你导航到其中一个“li”元素页面时（如下所示：https://jsfiddle.net/quwfmepL/2/例如注意：选择一个Test1元素，然后转到page1.html页面）..但是当你点击page1.html上的后退按钮到过滤器所在的页面时，它不记得最后一个过滤器选择。就像现在一样，您需要再次过滤相同的选择。我认为我需要做的是查看浏览器历史记录，但不确定是否有更简单的选项。我希望它可以是查询字符串或类似的格式。

<script type="text/JavaScript">
$(document).ready(function() {
  var $tagList = $('#tag-list'),
      optionArr = [];
    $("#demo-list li a").each(function(index, item) {
    $.each($(this).attr('class').split(' '), function(i, option){
      if ($.inArray(option, optionArr) == -1) {
        $tagList.append('<option value="'+option+'">'+option.replace('-', ' ').replace('_', ' ')+'</option>');
        optionArr.push(option);
      }
    });
  });
  // Look at the URL for filter and modify here #
  $tagList.on('change', function() {
    var selection = $tagList.val();
    if (selection == "all") {
      $('#demo-list li a').show();
    } else {
      $('#demo-list li a').hide();
      $('#demo-list li a.'+selection).show();
    }
  });
});
</script>

有任何建议或提示吗？任何帮助表示赞赏。

Answer 1

小提琴对我来说有点奇怪（不工作）。

您可能只想在.change函数中设置一个cookie，这可能是最简单的方法。加载过滤器页面时，检查cookie是否已设置，如果已设置，则根据存储的cookie值运行过滤器。

试用：https://github.com/js-cookie/js-cookie

或者，甚至可能更好，您可以使用webstorage（localstorage）来完成同样的事情。

http://www.w3schools.com/html/html5_webstorage.asp