如何在Jquery / option系统中保留最后的首选项？

Question

我发现了一个非常有用的基于更改select选项的Jquery example to filter divs。

这是小提琴：https://jsfiddle.net/vgdwyqxb/

我的问题是：我使用这段代码过滤项目，每个项目都有一个转到另一个页面的。当用户单击项目时，他/她会转到项目详细信息页面。在这些页面上，有一个“后退”按钮。当它们返回时，所有筛选选择都会丢失。我想保留过滤器的选择。

我在其他页面中添加了一个goBack()方法，以返回到filter页面。当我单击goback时，filter页面会记住选择了哪个选项，但是所有div都会出现(而不是过滤div)。据我所知，必须执行“更改选项”才能过滤div，因此，当我回到filter页面时，即使我最后选择的选项也被选中了，它不再过滤了。

我的问题是:当用户从项目详细信息页面返回时，我应该做什么来使筛选页面记住？

提前谢谢。

​

jQuery('#selectContainer select').on('change', function() {
var color = jQuery('#select-1').val();
var shape = jQuery('#select-2').val();
var style = jQuery('#select-3').val();


  jQuery('div.object').hide();
  
  jQuery('div.object').each(function() {
    if(jQuery(this).hasClass(color) && jQuery(this).hasClass(shape) && jQuery(this).hasClass(style)) {
    jQuery(this).show();
    }
  });
  
});


//$( document ).ready(function() {
$('#btnAuckland').click(function(){ 

    $('#select-1').val('Red').trigger('change');
})

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<div id="selectContainer">
  <select name="select-1" id="select-1">
        <option value="allColors">All</option>
        <option value="Red">Red</option>
        <option value="Blue">Blue</option>
    </select>
    <select name="select-2" id="select-2">
        <option value="allShapes">All</option>
        <option value="Square">Square</option>
        <option value="Circle">Circle</option>
    </select>
    <select name="select-3" id="select-3">
        <option value="allStyles" selected>All</option>
        <option value="Solid">Solid</option>
        <option value="Outline">Outline</option>
    </select>
</div>
    <hr />
    <div class="object allColors allShapes allStyles Red Square Solid">
        <p><a href="nextpage.html"> This is a solid, red square. </a> </p>
    </div>
    <div class="object allColors allShapes allStyles Red Square Outline">
        <p>This is a red, square outline.</p>
    </div>
    <div class="object allColors allShapes allStyles Red Circle Solid">
        <p>This is a solid, red circle.</p>
    </div>
    <div class="object allColors allShapes allStyles Red Circle Outline">
        <p>This is a red, circle outline.</p>
    </div>
    <div class="object allColors allShapes allStyles Blue Square Solid">
        <p>This is a solid, blue square.</p>
    </div>
    <div class="object allColors allShapes allStyles Blue Square Outline">
        <p>This is a blue, square outline.</p>
    </div>
    <div class="object allColors allShapes allStyles Blue Circle Solid">
        <p>This is a solid, blue circle.</p>
    </div>
    <div class="object allColors allShapes allStyles Blue Circle Outline">
        <p>This is a blue, circle outline.</p>
    </div>

​

Answer 1

为了实现您的目标，您可以使用localStorage()保存一个JSON编码的字符串，该字符串包含从三个筛选器select元素生成的最后选择。

加载页面后，您可以检索该JSON，将选定的值应用到select，并再次过滤内容。下面是这样做的代码：

// Save the selected values to JSON in localStorage
let saveObjectFilterSettings = () => {
  let filters = $('#selectContainer select').map((i, el) => ({
    id: el.id,
    val: el.value
  })).get();
  localStorage.setItem('filter', JSON.stringify(filters));
}

// Retrieve the filter JSON from localStorage and apply it to the DOM
let retrieveObjectFilterSettings = () => {
  let filters = JSON.parse(localStorage.getItem('filter') || '[]');
  filters.forEach(obj => $(`#${obj.id}`).val(obj.val));
}

// Apply the selected filters to the DOM
let filterObjects = () => {
  var color = $('#select-1').val();
  var shape = $('#select-2').val();
  var style = $('#select-3').val();

  $('div.object').each(function() {
    let $el = $(this);
    $el.toggle($el.hasClass(color) && $el.hasClass(shape) && $el.hasClass(style))
  });
}

jQuery($ => {
  retrieveObjectFilterSettings();
  filterObjects();

  $('#selectContainer select').on('change', function() {
    saveObjectFilterSettings();
    filterObjects();
  });
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<div id="selectContainer">
  <select name="select-1" id="select-1">
    <option value="allColors">All</option>
    <option value="Red">Red</option>
    <option value="Blue">Blue</option>
  </select>
  <select name="select-2" id="select-2">
    <option value="allShapes">All</option>
    <option value="Square">Square</option>
    <option value="Circle">Circle</option>
  </select>
  <select name="select-3" id="select-3">
    <option value="allStyles" selected>All</option>
    <option value="Solid">Solid</option>
    <option value="Outline">Outline</option>
  </select>
</div>
<hr />
<div class="object allColors allShapes allStyles Red Square Solid">
  <p><a href="nextpage.html"> This is a solid, red square. </a> </p>
</div>
<div class="object allColors allShapes allStyles Red Square Outline">
  <p>This is a red, square outline.</p>
</div>
<div class="object allColors allShapes allStyles Red Circle Solid">
  <p>This is a solid, red circle.</p>
</div>
<div class="object allColors allShapes allStyles Red Circle Outline">
  <p>This is a red, circle outline.</p>
</div>
<div class="object allColors allShapes allStyles Blue Square Solid">
  <p>This is a solid, blue square.</p>
</div>
<div class="object allColors allShapes allStyles Blue Square Outline">
  <p>This is a blue, square outline.</p>
</div>
<div class="object allColors allShapes allStyles Blue Circle Solid">
  <p>This is a solid, blue circle.</p>
</div>
<div class="object allColors allShapes allStyles Blue Circle Outline">
  <p>This is a blue, circle outline.</p>
</div>

下面是一个中的工作示例--我不得不为此使用小提琴，因为代码段是沙箱的，并且不允许访问localStorage。