Finsweet Dependent Filters

First we need to grab our two select elements and listen for the change event on one of them.
We also save our collection list items, because the Finsweet filter will dynamically add and remove list items from the DOM.

	const typeSelect = document.querySelector('.filter-form-select.type');
const brandSelect = document.querySelector('.filter-form-select.brand');
 
const items = Array.from(document.querySelectorAll('.collection-list .collection-list-item')); // Get all collection items
 
typeSelect.addEventListener('change', updateBrands); // Update when type selection changes

Before we look at the implementation of the updateBrands method, we will write ourselves a handy little helper method to display only specific options in our brand select.

	function displayBrands(brands) { // 1.
  brandSelect.querySelectorAll('option').forEach(option => { // 2.
    if (!option.value) return; // 3.
		
    const hidden = !brands.includes(option.value); // 4.
    option.hidden = hidden; // 5.
    option.disabled = hidden; // 6.
  });
}

1. This method takes an array of the option values that should be displayed as a parameter.
2. Loop through all option elements in the brand select element.
3. If the option has no value, the default option, ignore it. It should always be displayed.
4. If the brands array does not contain this option’s value, it should be hidden.
5. Set the hidden attribute accordingly.
6. Some browsers (e.g. Safari) do not support hidden on an option element. As a fallback, set the disabled attribute too. Disabled options cannot be selected and most likely appear greyed out.

After that is out of the way, we can start to implement our updateBrands method. 

	function updateBrands() {
  const selectedType = typeSelect.value;
  if (!selectedType) { // 1.
    const allBrands = Array.from(brandSelect.options).map(option => option.value); // 2.
 
    displayBrands(allBrands); // 3.
  } else {
      . . .
  }
}

1. First we will cover what happens, when no type is selected. All brands should be displayed.
2. We get all available options from the brand select element and convert them to an array. Then we map these option elements to their value attributes. We now have an array of all available values.
3. Lastly we just give this array to our displayBrands method and it will show all option elements.

	} else {
  // 1.
  const brands = items
     .filter(item => { // 2.
        const type = item.querySelector('.type').textContent; // 3.
        return type === selectedType; // 4.
     })
     .map(item => { // 5.
        return item.querySelector('.brand').textContent; // 6.
     });
 
  displayBrands(brands); // 7.
}

1. We transform the array of list items we saved early to an array of the brands we want to display.
2. First we filter for items that have the same type as the selected type
3. We get the corresponding type for each item by querying for the .type class.
4. If the type is the same as the selected, return true to include this item.
5. Now we map each of the items to their brands which should be displayed.
6. So we return the brand value, by querying for the .brand class.
7. At the end call our displayBrands method again, to show all brands that have at least some items with the selected type.

	const typeSelect = document.querySelector('.filter-form-select.type');
const brandSelect = document.querySelector('.filter-form-select.brand');
 
typeSelect.addEventListener('change', updateBrands); // Update when type selection changes
 
function updateBrands() {
   const selectedType = typeSelect.value;
   if (!selectedType) { // If no type is selected display all brands
       const allBrands = Array.from(brandSelect.options).map(option => option.value); // Get all available options and convert them to their values
 
       displayBrands(allBrands); // Display all brands that are in the select field
   } else {
       const items = Array.from(document.querySelectorAll('.collection-list .collection-list-item')); // Get all collection items
 
       // Transform to available brands in selected type
       const brands = items.map(item => {
           const type = item.querySelector('.type').textContent; // Get type of the item
 
           if (type === selectedType) { // If this type is selected, return the brand to add it to the list
               return item.querySelector('.brand').textContent;
           } // If this type is not selected, return nothing and ignore this item
       });
 
       displayBrands(brands); // Display all the brands that have the selected type
   }
}
 
function displayBrands(brands) {
   brandSelect.querySelectorAll('option').forEach(option => {
       if (!option.value) return; // Skip default option without value
 
       const hidden = !brands.includes(option.value);
       option.hidden = hidden;
       option.disabled = hidden;
   });
}