Exclude options in a Filter based on other selected filters

Attributes
1

Hi,

Is there a way to exclude options in another filter option based on a selection in the previous option?

For example, the filter contains branches, features, and clients. So when a specific branch is selected only a selected amount of features should be visible because they are connected to that specific branch.

I’ve included the read-only link.
https://preview.webflow.com/preview/zuid?utm_medium=preview_link&utm_source=designer&utm_content=zuid&preview=5599629e1f66a5e9f483c50d2d3ad4f1&pageId=65dd9829ceea0216ccf36e28&locale=nl&workflow=preview

Thanks in advance!

Very best,

Bart

2

Hey @Bart! I have shared this snippet with several users now, Can you test it and let me know how it goes?

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      const searchInput = document.querySelector('#global-field-textsearch');
      searchInput.dispatchEvent(new Event('input', { bubbles: true }));
      setTimeout(function () {
        filterInstances.forEach((filterInstance) => {
          function hideEmptyFilters() {
            const filtersData = filterInstance.filtersData;
            let resultsArray = [];

            filtersData.forEach(function (element) {
              const elements = element.elements;
              elements.forEach(function (element) {
                let filterValue = element.value;
                let resultsNumber = element.resultsCount;
                resultsArray.push({ filterName: filterValue, filterResults: resultsNumber });
              });
            });

            resultsArray.forEach(function (filter) {
              let elements = Array.from(document.querySelectorAll('[fs-cmsfilter-field]')).filter(
                function (element) {
                  return element.textContent.trim() === filter.filterName;
                }
              );

              elements.forEach(function (element) {
                let parentElement = element.parentElement;

                if (parentElement.tagName.toLowerCase() !== 'div') {
                  if (filter.filterResults === 0) {
                    parentElement.style.display = 'none';
                  } else {
                    parentElement.style.display = 'block';
                  }
                }
              });
            });
          }

          hideEmptyFilters();
          filterInstance.listInstance.on('renderitems', (renderedItems) => {
            hideEmptyFilters();
          });
        });
      }, 500);
    },
  ]);
</script>