For any one looking for the code... I took a screenshot and ran it through a free OCR to generate the text so please forgive any mistakes: // Select the select box const selectbox = document.querySelector('#field'); //Select CMS Items const authors = document.querySelectorAll('.author'); //Create options and add them to the select box authors.forEach((el) => { let option = document.createElement("option"); option.text = el.innerText; option.value = el.innerText; selectbox.add(option); });
Works perfect! Thanks. Any chance you can have site visitor select multiple selections? My scenario is my client has an insurance company and they want to know all the potential types of insurance services the person wants prior to calling them. The dropdown works great for a single type of insurance coverage, but if they could select multiple items then even better.
@@MoonDesignDev got that part. what about the reference pull in the code? option.value = el.innerText; - replace el.innerText with el.'.value-class' ?
Yes please, if u know how to a result of a select field much to another example : states and cities, when we select a stat we want only the cities that much to this state i hope u understand my question and thank u
Great tutorial How would adding filtrering look like? In my case, I need a dropdown like yours, but based on if the option is between a start and end date in a "events" CMS. We're asking street artists to apply for open calls, but the option should be visible/hidden based on the artist call start and end-dates for each event in the CMS.
The code doesn't seem to work - anyone know what might be causing this? I'm very stuck. I'm doing a job board and there's a section where the user has to select a Country... well, there are 200+ countries and I really want an efficient solution like this, rather than manually adding all of them. Thank you!
Hello John, first of all thanks so much for this video! I used this script and it's amazing!!! But now I need to use this script in 03 select box with a different CMS collections for each one. I trying to replicate the script in the body, but it's not working. How would that be possible?
I don't even know what to say kkkk it's really works! Thanks so much, John!!! I'll just put the code here in case someone needs it too ↓ //All you need to do is replace the ID and the COLLECTIONCLASS const selectBoxes = [ { id: 'field-country', collectionClass: '.country' }, { id: 'field-state', collectionClass: '.state' }, { id: 'field-city', collectionClass: '.city' } ]; selectBoxes.forEach((selectBox) => { const selectboxElement = document.querySelector(`#${selectBox.id}`); const countryElements = document.querySelectorAll(selectBox.collectionClass); countryElements.forEach((el) => { let option = document.createElement("option"); option.text = el.innerText; option.value = el.innerText; selectboxElement.add(option); }); });
3 роки тому
Will this also work for a text input field - and therefore, Search?
so the only two things i need to update in the code are the select ID and the class for the CMS item? ie Is my selectbox called selectbox as well? Either i;m doing it wrong or this code is out of date. I'm guessing the latter bc the select fields are no longer called that, they're dropdowns; but idk what that means for the backend naming. edit: nvm now i'm realising authors is plural, so is that the name that you gave for the group within your collection list? In other words, you can each author the "author" class which is from "authors"
Hi there! this video was really helpful! I have a custom code animation problem!! Can you solve it? If you can solve it and make a video on it, I think it will highly contribute to your channel. A typed animation of multiple texts (like the typed.js) in a input field, when you focus on the input field the animation has to be stopped and you can write anything there, again when you focus outside the input field, the animation has to be restarted. Looks like it's only possible by a pro like you. Anyway thanks for your great video. I loved it so much as I implemented this filtering in my blog.
Is this method outdated or something? I am following all the steps but I am not getting the output. If not can anyone give me what you have created I'll just clone it.
For any one looking for the code... I took a screenshot and ran it through a free OCR to generate the text so please forgive any mistakes:
// Select the select box
const selectbox = document.querySelector('#field');
//Select CMS Items
const authors = document.querySelectorAll('.author');
//Create options and add them to the select box authors.forEach((el) => {
let option = document.createElement("option");
option.text = el.innerText;
option.value = el.innerText;
selectbox.add(option);
});
Amazing tip! Could you share this snippet ?
Can you paste the code used in the comments or the video description?
Works perfect! Thanks. Any chance you can have site visitor select multiple selections? My scenario is my client has an insurance company and they want to know all the potential types of insurance services the person wants prior to calling them. The dropdown works great for a single type of insurance coverage, but if they could select multiple items then even better.
Looking for this solution too
Hey there, thanks its a great help, but how do i do this if i have more when one of bothe fields and collection?
still works? I've tried withou sucess
awesome! how would i go about adding/changing the value based on another field pulling from the collection?
Same general process. Whatever you want on the page you need to add to the (hidden) collection and then add it to dropdown.
@@MoonDesignDev got that part. what about the reference pull in the code? option.value = el.innerText; - replace el.innerText with el.'.value-class' ?
@@nicolashirajeta8859 it depends on on your setup. If you send me a link I could tell you.
@@TheBibleisArt just need the value based on another text field
Thank you! great stuff! Is it possible to make a “wishlist” functionality for cms items?
Yes please, if u know how to a result of a select field much to another example : states and cities, when we select a stat we want only the cities that much to this state i hope u understand my question and thank u
Great tutorial
How would adding filtrering look like?
In my case, I need a dropdown like yours, but based on if the option is between a start and end date in a "events" CMS.
We're asking street artists to apply for open calls, but the option should be visible/hidden based on the artist call start and end-dates for each event in the CMS.
Have you tried @finsweet attributes filter cms?
@@MoonDesignDev not yet, I will take a look. Thank you 🙏
The code doesn't seem to work - anyone know what might be causing this? I'm very stuck. I'm doing a job board and there's a section where the user has to select a Country... well, there are 200+ countries and I really want an efficient solution like this, rather than manually adding all of them. Thank you!
Hello John, first of all thanks so much for this video! I used this script and it's amazing!!! But now I need to use this script in 03 select box with a different CMS collections for each one. I trying to replicate the script in the body, but it's not working. How would that be possible?
Dump it into ChatGPT and tell it what you need, if that doesn’t work send me a link to the project
I don't even know what to say kkkk it's really works! Thanks so much, John!!!
I'll just put the code here in case someone needs it too ↓
//All you need to do is replace the ID and the COLLECTIONCLASS
const selectBoxes = [
{
id: 'field-country',
collectionClass: '.country'
},
{
id: 'field-state',
collectionClass: '.state'
},
{
id: 'field-city',
collectionClass: '.city'
}
];
selectBoxes.forEach((selectBox) => {
const selectboxElement = document.querySelector(`#${selectBox.id}`);
const countryElements = document.querySelectorAll(selectBox.collectionClass);
countryElements.forEach((el) => {
let option = document.createElement("option");
option.text = el.innerText;
option.value = el.innerText;
selectboxElement.add(option);
});
});
Will this also work for a text input field - and therefore, Search?
Awesome. And Would love to see JavaScript tutorial for webflow from you.
In my case the selectfield stays empty. Can ik sent you a read only link (in PM?).
Sure
so the only two things i need to update in the code are the select ID and the class for the CMS item? ie Is my selectbox called selectbox as well? Either i;m doing it wrong or this code is out of date. I'm guessing the latter bc the select fields are no longer called that, they're dropdowns; but idk what that means for the backend naming.
edit: nvm now i'm realising authors is plural, so is that the name that you gave for the group within your collection list? In other words, you can each author the "author" class which is from "authors"
Let me know if ya'll have any questions!
Hi there! this video was really helpful! I have a custom code animation problem!! Can you solve it? If you can solve it and make a video on it, I think it will highly contribute to your channel. A typed animation of multiple texts (like the typed.js) in a input field, when you focus on the input field the animation has to be stopped and you can write anything there, again when you focus outside the input field, the animation has to be restarted. Looks like it's only possible by a pro like you. Anyway thanks for your great video. I loved it so much as I implemented this filtering in my blog.
I tried this, it didn't work for me. Does this work with multi-reference fields? Could very well be an error on my part though!
If you share the link and code I could take a look
@@MoonDesignDev please put the code to copy
Is this method outdated or something?
I am following all the steps but I am not getting the output.
If not can anyone give me what you have created I'll just clone it.
Awesome walkthrough! :)
// Select the select box
const selectbox = document.querySelector('#field');
//Select CMS Items
const authors = document.querySelectorAll('.author');
//Create options and add them to the select box
authors.forEach((el) => {
let option = document.createElement("option");
option.text = el.innerText;
option.value = el.innerText;
selectbox.add(option);
});
Beautiful! 😍