Hi, I have a Select Field element, which is populated by CMS Select, and controls the CMS Filter. It works great, but on mobile devices, I’m hiding this Select Field element, and make a list of buttons visible. I already have a little script that ‘forwards’ the button clicks to this Select Field. However, even though the Select Field value changes as it should, the filters aren’t being triggered. Is there a way to force update the filters? Thanks a lot in advance!
If it makes life easier, here’s a read-only link: Webflow - Tropos
Hi, I hope any of you has found a little moment to look into our question! If there is anything we can do to help; provide additional info, take some action on our side, etc. we’d be happy to do that!
Thank you @studiopiraat! I am currently taking a look, I will let you know when I spot the issue!
Hey @studiopiraat! There was an issue in how the select value was added, and an issue with the dispatched event after the option was updated.
This script should now work properly. Left the console logs so you can verify everything is working on your end
document.addEventListener('DOMContentLoaded', () => {
// Select the buttons and the select field
const radioButtons = document.querySelectorAll('.md--radio-button');
const selectField = document.querySelector('.select-field--category');
if (!selectField || radioButtons.length === 0) return;
// Assign data-value dynamically based on the span's text content
radioButtons.forEach((button) => {
const label = button.closest('label')?.querySelector('.style--btn--filter');
if (label) {
const value = label.textContent.trim(); // Get the text content of the span
button.dataset.value = value; // Assign it as data-value
}
});
// Add event listeners for button clicks
radioButtons.forEach((button) => {
button.addEventListener('click', () => {
const value = button.dataset.value; // Retrieve the assigned data-value
if (value) {
console.log('Setting selectField.value to:', value);
// Ensure the selectField is correctly selected
console.log('Current selectField:', selectField);
// Update the select field value
selectField.value = value;
console.log('Updated selectField.value:', selectField.value);
// Check if the value matches any <option>
const options = Array.from(selectField.options);
const isValidValue = options.some((option) => option.value === value);
if (!isValidValue) {
console.error(`Value "${value}" does not match any <option> in the select field.`);
}
// Trigger the 'input' event on the select field
const inputEvent = new Event('input', { bubbles: true });
selectField.dispatchEvent(inputEvent);
console.log('Dispatched "inputEvent" event on the select field.');
} else {
console.warn('No value found for this button.');
}
});
});
});
Let me know how it goes!
Hi @Support-Luis, thanks a ton for your answer! I’m sorry I couldn’t thank you earlier; for some reason I wasn’t able to log in on the forum. It said something about authentication failed, or that I was logged in elsewhere. However, that seems to be resolved, and so is our initial problem! Thanks again