# Difficulties with implementing CMS Select & Filter

**URL:** <https://forum.finsweet.com/t/difficulties-with-implementing-cms-select-filter/3893>\
**Category:** Attributes\
**Tags:** cmsfilter, cmsselect\
**Created:** [December 4, 2024, 4:36pm UTC](https://forum.finsweet.com/t/difficulties-with-implementing-cms-select-filter/3893 "2024-12-04T16:36:56Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vible](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/vible/32/3451_2.png) [@Vible](https://forum.finsweet.com/u/Vible)\
**Post date:** [December 4, 2024, 4:36pm UTC](https://forum.finsweet.com/t/difficulties-with-implementing-cms-select-filter/3893/1 "2024-12-04T16:36:56Z")

</div>

Hello Finsweet team,

I am currently working on a Webflow website for a client and would like to use your Finsweet attributes, specifically the CMS Filter and CMS Select attributes. I am trying to create a registration form where users need to filter twice through a select element.

My client offers different services, such as courses, workshops, and events. In the registration form, I want users to first select a category (e.g., ‘Courses’ or ‘Workshops’). Based on this selection, specific options should then become available, such as the different courses within that category. Additionally, the user should be able to select a specific start date for the chosen course.

My question is whether this is possible with Finsweet’s CMS Filter and CMS Select attributes. I have tried to implement this, but I couldn’t get it to work as intended. If this is not possible with your attributes, could you perhaps recommend an alternative solution?

Thank you very much in advance for your help!

Best regards,  
Micky

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [December 4, 2024, 11:08pm UTC](https://forum.finsweet.com/t/difficulties-with-implementing-cms-select-filter/3893/2 "2024-12-04T23:08:21Z")

</div>

Hello Micky!

This should be possible with some extra JS, you can add any code to the solutions with the [API](https://finsweet.com/attributes/api), this should let you filter the second Select element based on the first Select’s value.

I can help with this code if you need me to, if so, can you please share your read-only link?

---

<div class="post-metadata">

**Author:** ![Vible](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/vible/32/3451_2.png) [@Vible](https://forum.finsweet.com/u/Vible)\
**Post date:** [December 5, 2024, 8:30am UTC](https://forum.finsweet.com/t/difficulties-with-implementing-cms-select-filter/3893/3 "2024-12-05T08:30:58Z")

</div>

Hello Luis,

Thank you for your response! That sounds like exactly what I need. I would appreciate your help with the code. Here’s the read-only link: [Webflow - Vidarte.nl 2.0](https://preview.webflow.com/preview/vidarte-272759355fb7e4584-b5617dd191ad2?utm_medium=preview_link&utm_source=designer&utm_content=vidarte-272759355fb7e4584-b5617dd191ad2&preview=c6e8ed3333d76b83e7db186a9bae2fbd&pageId=6719025c5b683e05b4300246&locale=nl&workflow=preview).

Please let me know if you need any additional information!

Best regards,  
Micky

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [December 5, 2024, 6:17pm UTC](https://forum.finsweet.com/t/difficulties-with-implementing-cms-select-filter/3893/4 "2024-12-05T18:17:21Z")

</div>

Hey @Vible!

Could you please record a quick loom on the desired process or flow expected? As in, what options should show which options on the next select options and so on.

---

<div class="post-metadata">

**Author:** ![Vible](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/vible/32/3451_2.png) [@Vible](https://forum.finsweet.com/u/Vible)\
**Post date:** [December 8, 2024, 9:28pm UTC](https://forum.finsweet.com/t/difficulties-with-implementing-cms-select-filter/3893/5 "2024-12-08T21:28:23Z")

</div>

Hi Luis!

I’ve made a recording with Loom. I hope this recording helps with understanding the process I’m looking for! If you need more information, please let me know.

https://www.loom.com/embed/8c71e5816f7249fbb796e6ce06bf7c0f?sid=a03fa64d-3dd1-4bf3-9408-3e3cfaf6f637

Best regards,  
Micky

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [December 9, 2024, 4:18pm UTC](https://forum.finsweet.com/t/difficulties-with-implementing-cms-select-filter/3893/6 "2024-12-09T16:18:10Z")

</div>

Thank you for the video @Vible!

I’m afraid we cannot do this with CMS Filter, however, I’ve written some code that should achieve what you are trying to do. You can test it in a very simple, rough setup here → [Range Slider](https://luiss-dynamite-site-423ab5.webflow.io/support-testing)

The only change needed to your setup would be adding the category of the event as a dynamic attribute with the name `data-category`

 ![Screenshot 2024-12-09 at 16.15.01](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/8/86e73fe63680ef4550b090e056cdc9ff227038b0.jpeg)

And adding the following code to the `</body>` section in the page’s custom code

```js
<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsselect',
    (listInstances) => {
      console.log('cmsselect successfully loaded!');

      const eventSelect = document.querySelector('[fs-cmsselect-element="select"]');
      const opleidingSelect = document.querySelector('[fs-cmsselect-element="select-2"]');
      const listInstance = listInstances[1];
      const { items } = listInstance;

      const placeholder = document.createElement('option');
      placeholder.value = '';
      placeholder.textContent = 'Select one...';
      placeholder.selected = true;

      eventSelect.addEventListener('change', ({ target }) => {
        const selectValue = target.value;

        const filteredItems = items.filter(({ element }) => {
          if (!selectValue) return true;
          const textValue = element.querySelector('[fs-cmsselect-element]');
          return textValue?.getAttribute('data-category') === selectValue;
        });

        opleidingSelect.innerHTML = '';
        opleidingSelect.appendChild(placeholder);

        filteredItems.forEach(({ element }) => {
          const textValue = element.querySelector('[fs-cmsselect-element]');
          if (textValue) {
            const optionElement = document.createElement('option');
            optionElement.value = optionElement.textContent = textValue.textContent.trim();
            opleidingSelect.appendChild(optionElement);
          }
        });
      });
    },
  ]);
</script>

```

Let me know if you have any questions or issues setting this up!

---

<div class="post-metadata">

**Author:** ![Vible](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/vible/32/3451_2.png) [@Vible](https://forum.finsweet.com/u/Vible)\
**Post date:** [December 10, 2024, 9:50am UTC](https://forum.finsweet.com/t/difficulties-with-implementing-cms-select-filter/3893/7 "2024-12-10T09:50:55Z")

</div>

Hi Luis,

Excellent! This set-up works for me, thank you very much. Is it also possible to use this code for filtering the starting dates in the third select field based on the input of the second select field? If so, what do I need to change in the code if its necessary?

Best regards,  
Micky

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [December 10, 2024, 9:57am UTC](https://forum.finsweet.com/t/difficulties-with-implementing-cms-select-filter/3893/8 "2024-12-10T09:57:44Z")

</div>

Hey @Vible! Great to hear this works for you! 💪

We can use a similar approach for the date filtering, you’ll need to replicate the steps of adding the date as a `data-attribute` and filtering the items of that Select instance.

I can help you out with the code if you need me to! Just let me know when the date attribute has been added

---

<div class="post-metadata">

**Author:** ![Vible](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/vible/32/3451_2.png) [@Vible](https://forum.finsweet.com/u/Vible)\
**Post date:** [December 10, 2024, 10:42am UTC](https://forum.finsweet.com/t/difficulties-with-implementing-cms-select-filter/3893/9 "2024-12-10T10:42:39Z")

</div>

Hi Luis,

I have added the `data-attribute` to the date items and made an attempt to change a bit of the code.

```auto
<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsselect',
    (listInstances) => {
      console.log('cmsselect successfully loaded!');

      const opleidingSelect = document.querySelector('[fs-cmsselect-element="select-2"]');
const startdatumSelect = document.querySelector('[fs-cmsselect-element="select-3"]');
      const listInstance = listInstances[1];
      const { items } = listInstance;

      const placeholder = document.createElement('option');
      placeholder.value = '';
      placeholder.textContent = 'Select one...';
      placeholder.selected = true;

      opleidingSelect.addEventListener('change', ({ target }) => {
        const selectValue = target.value;

        const filteredItems = items.filter(({ element }) => {
          if (!selectValue) return true;
          const textValue = element.querySelector('[fs-cmsselect-element-2]');
          return textValue?.getAttribute('data-category') === selectValue;
        });

        startdatumSelect.innerHTML = '';
        startdatumSelect.appendChild(placeholder);

        filteredItems.forEach(({ element }) => {
          const textValue = element.querySelector('[fs-cmsselect-element-2]');
          if (textValue) {
            const optionElement = document.createElement('option');
            optionElement.value = optionElement.textContent = textValue.textContent.trim();
            opleidingSelect.appendChild(optionElement);
          }
        });
      });
    },
  ]);
</script>

```

I feel like I’m close, but I’m still overlooking something.

Best regards,  
Micky

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [December 10, 2024, 1:25pm UTC](https://forum.finsweet.com/t/difficulties-with-implementing-cms-select-filter/3893/10 "2024-12-10T13:25:06Z")

</div>

Hey @Vible!

I’ve reworked the code a little for it to work as it should, there was an error in selecting the correct list instance. Please test and let me know if any changes need to be made

```js
<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsselect',
    (listInstances) => {
      console.log('cmsselect successfully loaded!');

      const eventSelect = document.querySelector('[fs-cmsselect-element="select"]');
      const opleidingSelect = document.querySelector('[fs-cmsselect-element="select-2"]');
      const startdatumSelect = document.querySelector('[fs-cmsselect-element="select-3"]');

      const listInstance = listInstances[1];
      const startdatumListInstance = listInstances[2];

      const { items } = listInstance;
      const { items: startdatumItems } = startdatumListInstance;

      const createPlaceholder = (text) => {
        const placeholder = document.createElement('option');
        placeholder.value = '';
        placeholder.textContent = text;
        placeholder.selected = true;
        return placeholder;
      };

      eventSelect.addEventListener('change', ({ target }) => {
        const selectValue = target.value;

        const filteredItems = items.filter(({ element }) => {
          if (!selectValue) return true;
          const textValue = element.querySelector('[fs-cmsselect-element]');
          return textValue?.getAttribute('data-category') === selectValue;
        });

        opleidingSelect.innerHTML = '';
        opleidingSelect.appendChild(createPlaceholder('Kies een optie...'));

        filteredItems.forEach(({ element }) => {
          const textValue = element.querySelector('[fs-cmsselect-element]');
          if (textValue) {
            const optionElement = document.createElement('option');
            optionElement.value = optionElement.textContent = textValue.textContent.trim();
            opleidingSelect.appendChild(optionElement);
          }
        });
      });

      opleidingSelect.addEventListener('change', ({ target }) => {
        const selectValue = target.value;

        const filteredItems = startdatumItems.filter(({ element }) => {
          if (!selectValue) return true;
          const textValue = element.querySelector('[fs-cmsselect-element]');
          return textValue?.getAttribute('data-category') === selectValue;
        });

        startdatumSelect.innerHTML = '';
        startdatumSelect.appendChild(createPlaceholder('Kies een optie...'));

        filteredItems.forEach(({ element }) => {
          const textValue = element.querySelector('[fs-cmsselect-element]');
          if (textValue) {
            const optionElement = document.createElement('option');
            optionElement.value = optionElement.textContent = textValue.textContent.trim();
            startdatumSelect.appendChild(optionElement);
          }
        });
      });
    },
  ]);
</script>

```

---

<div class="post-metadata">

**Author:** ![Vible](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/vible/32/3451_2.png) [@Vible](https://forum.finsweet.com/u/Vible)\
**Post date:** [December 10, 2024, 1:46pm UTC](https://forum.finsweet.com/t/difficulties-with-implementing-cms-select-filter/3893/11 "2024-12-10T13:46:28Z")

</div>

Hi Luis,

Thank you so much that did the trick! It is working perfectly fine.

Best regards,  
Micky

---

<div class="post-metadata">

**Author:** ![Vible](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/vible/32/3451_2.png) [@Vible](https://forum.finsweet.com/u/Vible)\
**Post date:** [December 12, 2024, 10:39am UTC](https://forum.finsweet.com/t/difficulties-with-implementing-cms-select-filter/3893/12 "2024-12-12T10:39:28Z")

</div>

Hi Luis,

I want to thank you again for the code you provided, it helped me greatly. However, due to this code, I’m unable to receive submissions through this form. I suspect that the issue might be related to the Finsweet CMS Select attribute, because submissions do work with another registration form where the input of the select field is populated with CMS content using a different code.  
Could you please help me with this issue?

Best regards,  
Micky