How to Add Webflow CMS Items into a Select Box

With a few lines of code you can add webflow cms items to a select box in form.

[highpassionhighprofit]

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:

<script>
// Select the select box
const selectbox =
//Select CMS Items
const authors =
//Create options and add them to the select box authors.forEach((el) => {
let option =

option.text = el.innerText;
option.value = el.innerText;

selectbox.add(option);

});
</script>

[MichalCzerlikowski]

Amazing tip! Could you share this snippet ?

[angadsingh]

Can you paste the code used in the comments or the video description?

[twbashar]

Awesome. And Would love to see JavaScript tutorial for webflow from you.

[derekentrekin]

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.

[SebastianDexas]

Hey there, thanks its a great help, but how do i do this if i have more when one of bothe fields and collection?

[AndrewE]

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!

[nicolashirajeta]

awesome! how would i go about adding/changing the value based on another field pulling from the collection?

[Sergy_Kondrashin]

Thank you! great stuff! Is it possible to make a “wishlist” functionality for cms items?

[devjou]

still works? I've tried withou sucess

[yassifnimo]

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

[goldenant]

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"

[MoonDesignDev]

Let me know if ya'll have any questions!

Will this also work for a text input field - and therefore, Search?

[StudiesStreet]

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.

[erwinbomans]

In my case the selectfield stays empty. Can ik sent you a read only link (in PM?).

[lucas-pancha]

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?

[usamaiftikhar]

<script>
// Select the select box
const selectbox =
//Select CMS Items
const authors =
//Create options and add them to the select box
authors.forEach((el) => {
let option =

option.text = el.innerText;
option.value = el.innerText;

selectbox.add(option);

});
</script>

[shahriarfrances]

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.

[hmbhargavarajeurs]

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.