Question

我正在使用一组选择框（复合过滤器），在选择某些选项时禁用项目。我试图将它与同位素一起用作禁用不可用组合的简单方法。一切都很好，除了脚本似乎存储了最后选择的组合。

我使用了开发人员推荐的功能来重置同位素，我也重置了过滤器。它工作，过滤器（选择框）重置为默认“全部”，重新启用选择框中的项目，并重置同位素网格以显示所有项目。当我再次使用过滤器时，我选择的新项目不再显示，就像之前选择的过滤器仍然处于启用状态一样。

我做错了什么？如何刷新页面，如何完全重置所有内容？

请注意，我在下面的示例中未包含Isotope。

$(function() {
  var $selects = $('select[name*="select"]').change(function(e) {
    var val = this.value;
    $selects.not(this).find('option').prop('disabled', function() {
      return this.value === val || $(this).hasClass(val)
    })

  })
  $('.button--reset').on( 'click', function() {
  $('.grid').isotope({
        filter: '*',
  });
  $('.option-set').val('*');
  $selects.val('').find('option').prop('disabled', false)
  });
});

<div class="">
  <select name="select-type" id="select-type">
        <option value="">All</option>
        <option class="Small Medium Red Yellow" value="Apple">Apple</option>
        <option class="Small Large Red Green" value="Pear">Pear</option>
        <option class="Medium Large Green Yellow" value="Strawberry">Strawberry</option>     
      </select>
</div>

<div class="">
  <select name="select-size" id="select-size">
        <option value="">All</option>
        <option class="Apple Pear Green Yellow" value="Small">Small</option>
        <option class="Apple Strawberry Red Green" value="Medium">Medium</option>
        <option class="Pear Strawberry Red Yellow" value="Large">Large</option>  
      </select>
</div>

<div class="">
  <select name="select-color" id="select-color">
        <option value="">All</option>
        <option class="Apple Pear Medium Large" value="Red">Red</option>
        <option class="Pear Strawberry Small Medium" value="Green">Green</option>
        <option class="Apple Strawberry Small Large" value="Yellow">Yellow</option>      
      </select>
</div>

<button class="button button--reset">Reset</button>

我希望这是有道理的。谢谢你的帮助

重置存储的jQuery选项值

0 个答案: