按产品标签过滤ajax

Question

我正在尝试使用Ajax按产品标签过滤收藏页中的产品。我已按照本教程进行操作： https://vyeung.wordpress.com/2013/09/05/advanced-ajax-shopify-collection-tags-filter/

在遵循本教程时它可以工作，但是我试图对其进行自定义，以便使用选择字段而不是列表。 这是代码：

  <div class="grid">
        {% for i in (1..4) %}
        <div class="small--hide">
        {% capture include_filter %}include_filter_no_{{ i }}{% endcapture %}
        <!-- {{ include_filter }} -->
        {% capture filter_label %}filter_no_{{ i }}_label{% endcapture %}
        <div class="grid__item medium-up--one-fifth">
        <div class="filter tags {{ settings[filter_label] }}" id="filter-{{ i }}">
          <span class="filter-label">{{ settings[filter_label] }}</span>
          <select class="filter-list">
            {% capture filter_linklist %}filter_no_{{ i }}_linklist{% endcapture %}
            {% include 'filter-by-tag' with settings[filter_linklist] %}
          </select>
        </div>
              </div>
        {% endfor %}
        <div class="grid__item medium-up--one-fifth">
{% include 'sort-by' %}
</div>
    </div>
  </div>

{% assign all_filter_tags = '' %}
{% for link in linklists[filter-by-tag].links %}
  {% if collection.all_tags contains link.title %}
    {% capture all_filter_tags %}{{ all_filter_tags }},{{ link.title }},{% endcapture %}
  {% endif %}
{% endfor %}
{% assign new_tags = '' %}
{% for tag in current_tags %}
  {% unless all_filter_tags contains tag %}
    {% capture new_tags %}{{ new_tags }}+{{ tag | handle }}{% endcapture %}
  {% endunless %}
{% endfor %}
{% capture new_tags %}{{ new_tags | remove_first: '+' }}{% endcapture %}
{% for link in linklists[filter-by-tag].links %}
  {% if collection.all_tags contains link.title %}
    {% if current_tags contains link.title %}
      <option class="{{ link.title | handle }} active">{{ link.title | link_to_remove_tag: link.title }}</option>
    {% else %}
      {% if collection.url != '' %}
        {% capture url %}{{ collection.url }}/{% if new_tags != '' %}{{ new_tags }}+{% endif %}{{ link.title | handle }}{% endcapture %}
      {% else %}
        {% capture url %}/collections/all/{% if new_tags != '' %}{{ new_tags }}+{% endif %}{{ link.title | handle }}{% endcapture %}
      {% endif %}
      <option class="{{ link.title | handle }}">{{ link.title | link_to: url }}</option>
    {% endif %}
  {% endif %}
{% endfor %}
{% if collection.url != '' %}
  {% capture url %}{{ collection.url }}{% if new_tags != '' %}/{{ new_tags }}{% endif %}{% endcapture %}
{% else %}
  {% capture url %}/collections/all{% if new_tags != '' %}/{{ new_tags }}{% endif %}{% endcapture %}
{% endif %}
<option class="all">{{ 'All ' | append: linklists[filter-by-tag].title | link_to: url }}</option>

JS：

 $(function () {
        var popped = ('state' in window.history && window.history.state !== null),
            initialURL = location.href;

        //function to handle the scenarios where back and forward buttons used in browser
        $(window).bind("popstate", function (e) {
            // Ignore inital popstate that some browsers fire on page load
            var initialPop = !popped && location.href == initialURL;
            popped = true;
            if (initialPop) {
                return;
            }
            ajaxLoadPage(location.href);
        });

        //the ajax function that does the AJAX calls to get the products and load them into the grid
        var ajaxLoadPage = function (url) {
            $.ajax({
                type: 'GET',
                url: url,
                data: {},
                complete: function (data) {
                    $('#collection').html($("#collection", data.responseText).html());
                    history.pushState({
                        page: url
                    }, url, url);
                }
            });
        }

        {% capture pathUrl %}{% if collection.handle %}{% capture url %}/collections/{{ collection.handle }}{% endcapture %}{{ url }}{% elsif collection.all_products_count > 0 and collection.products.first.type == collection.title %}{{ link_to_type }}{% elsif collection.all_products_count > 0 and collection.products.first.vendor == collection.title %}{{ link_to_vendor }}{% endif %}{% endcapture %}

        var collectionUrl = window.location.protocol+'//'+window.location.hostname+'{{ pathUrl}}';

        //this detects one of the filters being clicked that should then
        //decide what URL to call in order to get the newly filtered product grid
        $("#filter-1 select , #filter-2 select").change(function() {
            var self = this;

            // check if the click is on a "remove tag" filter
            var isRemoveFilter = false;
            if ($(this).find('option').hasClass('active')) {
                $(this).find('option').removeClass('active');
                isRemoveFilter = true;
            } else if ($(this).find('option').hasClass("all")) {
                //check if "all brands" or "all colors" clicked
                var ul = $(this);
                $('option', ul).removeClass('active');
                isRemoveFilter = true;
            } else {
                //otherwise it means click on an unfiltered tag
                //remove other "Remove tag" in same filter row
                var ul = $(this);
                $('option', ul).removeClass('active');

                //add the active tag onto the new filter that was clicked
                $(this).find('option').addClass('active');

            }

            var activeBrand = '';
            if ($('#filter-1 select option.active').length > 0) {
                activeBrand = $('#filter-1 ul li.active').text();
            }
            var activeColor = '';
            if ($('#filter-2 select option.active').length > 0) {
                activeColor = $('#filter-2 ul li.active').text();
            }

            var selectedBrand = '';
            if ($(this).parents().hasClass('brands') && !isRemoveFilter) {
                selectedBrand = $(this).text();
            }
            var selectedColor = '';
            if ($(this).parents().hasClass('colors') && !isRemoveFilter) {
                selectedColor = $(this).text();
            }

            //console.log('activeBrand = ' + activeBrand);
            //console.log('activeColor = ' + activeColor);
            //console.log('selectedBrand = ' + selectedBrand);
            //console.log('selectedColor = ' + selectedColor);



            var newBrand = selectedBrand || activeBrand;
            var newColor = selectedColor || activeColor;
            //console.log('newBrand = ' + newBrand);
            //console.log('newColor = ' + newColor);

            url = collectionUrl + "/";

            if (newBrand != '' && newColor != '') {
                url += newBrand + "+" + newColor;
            } else if (newColor != '') {
                url += newColor;
            } else if (newBrand != '') {
                url += newBrand;
            }

            //console.log(url);
            ajaxLoadPage(url);
        });

    });

因此，当我将js /标记更改为select / options而不是列表时，它破坏了功能，当选择其他选项时，什么也没有发生（控制台中没有错误）

任何想法如何做到这一点？