How to Webflow: Adding data from Collections to Select Dropdown fields

Here's the new way to do this without any code: • Create Dynamic Select ...
Original post from the Webflow forums:
forum.webflow....
#webflow #webdesign #jquery
Join the Pixel Geek Community:
pixelgeek.comm...
-------
I've been a web designer since 1995 and I've learned a lot about this industry. Now that I've found my dream job at Webflow, I want to share some of my experiences and knowledge with you in hopes you can find your dream job as well.
The purpose for this channel is to help you design and build better websites, learn more about the business of web design, and empower you to inspire others in this unique creative industry.
-------
Like what you see? Subscribe here:
www.youtube.co...
-------
/ thepixelgeek
/ pxlgk
pixelgeek.co

[@lonnietarrant3681]

This man deserves to be in the mythology annuls of time. Bless you and all your children!

[@pixelgeek]

You are so kind

[@ericonca]

jQuery + JS code is not in the description nor the forum post. Was it removed?

[@corinaskywalker]

I'm pretty sure you're my hero now. I cannot say it enough, THANK YOU for all of the amazing videos

[@pixelgeek]

My pleasure. And thank you for watching. I appreciate you. 😁❤️

[@davida.rosales6025]

Marvelous! Bravo, man! your code is always cleaner and faster than other options I tend to find. Your videos are also incredibly clear. Thank you so much.

[@pixelgeek]

Thanks so much 😁🙇🏽‍♂️

[@davida.rosales6025]

@@pixelgeek I don't know if it's because of changes in Select2 or in Webflow, things might not work the same now in 2022. It's probably because these technologies are new and are still changing. Especially in the case of Webflow.

[@Samus10175]

You said the code would be posted in the description. Did I miss a link? I haven't been able to find it.

[@dominikmoravcik1896]

You are such a help to the Webflow community, thank you so much for your time and effort you put in!

[@hmbhargavarajeurs3620]

Hey, I was working on this same thing. But i am not getting the required output. If you have achieved this can give your component I'll clone it.

[@josephbates9917]

Thanks again Nelson! 😁👋

[@craigthomas4565]

Thanks as always Nelson. You are helping all of us so much with these tutorials. You are the master and we are your padawans ( ;

[@pixelgeek]

thanks for watching and for your support. 🙇🏽‍♂️ It's my pleasure to help unlock the Jedi in all of you.,

[@brandonmosco8365]

Awesome Nelson. Still learning JQuery.

[@lucasdidier4476]

You're amazing @PixelGeek! Keep going ✌️

[@grantsenior3291]

Just what I needed to know. Thanks again for your help!

[@pixelgeek]

My pleasure 😁

[@parhamshafti2578]

Hi Nelson! I have been trying to make this work following your exact procedure but for some reason the list I try to move into the selectbox don't show up. Not sure what I'm missing. Has anything changed since you posted the video few years back? Would appreciate your help.

[@CAL-qd7xc]

Hello Parham Shafti, I do this tuto today and it work ! I guess you have missed something, try to check up your code :)

[@calebmjw5675]

but how do you turn this select field into a search feature... say for example, you have a make, a model and a type of engine... and then a search button after they select their fields and want to search for a specific type of vehical and such... how do you add that function?

[@afnanghzwi2782]

I have the Sam Q .... any answer?

[@SodaFader]

Please Sam 😂

[@CheeseToasties]

Wow thank you so much. I'm new to webflow as making the jump away from WordPress. Thank you for your videos. I have a question for you - my objective is to make a product enquiry form. So as my select field references the products, is there a way for another select field to reference the variation options from the previews select field value. For example I select product A in main select field. Then the next select field will show only the variations for product A? Thanks in advance.

[@ChandraShekhar-xb9xq]

@pixelgeek I’d like to ask for your help on how to create a 2 level structure with the CMS and using it as a dropdown menu. Please help. Thank you.

[@Evannah7]

This is amazing. Thank you!

[@Rigson]

Super useful, thanks Nelson

[@pixelgeek]

My pleasure

[@DCWilliam24]

Dude, THANK YOU! I can’t believe this functionality isn’t standard... Is it also possible to achieve conditional logic in Webflow forms this way?

[@pixelgeek]

my pleasure :) Thanks for watching. As for conditional logic forms, this is not yet available in Webflow. But I would strongly suggest using Typeform.com for that and embedding that into your Webflow project.

[@mariamabouelfadel3209]

Thank youu for the tutorial, I did exactly the same things but at the end the select field is empty 😥😥

[@timberce]

Hey, unfortunately it's impossible to actually submit this data, because of how you built this. On submit the form doesn't push through the dynamic values, only the static ones that were available on page load.

[@madison4530]

Awesome. Thanks for the help man!

[@jorgen628]

This is great! Now, what about "how to show embed code widgets from CMS richtext input method to display right on a CMS page?"

[@aishbhosale4198]

Hey Nelson, Could you please tell me how to add filter in drop down (like click on Country in the dropdown link and shows 4 events in this country) How can i add the 4 items to the link?

[@Ko6kin]

Do you have any idea how to autofill anoter field based on cms data? For example, in CMS I have Name data, and Role data. I want select my name and the role field should be autofilled after that. Is it possible in here?

[@goldenant9450]

not sure if im doing something wrong, or it no longer working. 1:33 I don't see the dropdown settings like you show here, but there are items pre-populated. I tried deleting them from the canvas but it didn't work

[@TheAssasin1818]

Top stuff as usual!

[@pixelgeek]

thanks for watching! :D

[@joshuajia722]

First of all, that's so helpful... For the second, can I move one step further? When CMS item being select, display the related info on the side? Such as, when select the name, display the description?

[@jericjamesmunez]

You're the best man!

[@michielwils8401]

Thanks! This is what I needed! :)

[@xxss90]

Hi @pixelgeek, thanks for this great tutorial! Is there a way to link those cms fields to the cms items?

[@stanislastls1]

Hi thanks for the video, where is the script ?

[@jennamanthe9711]

Hey Nelson - thanks for such a clear, informative video :) Would it be possible to insert an image + text CMS field rather than just text? Like for an international phone number where you want the country flag + phone code. TIA!

[@jasonhebert1656]

This is amazing. I do have a question. I have 2 dropdowns with 2 different cms lists I want to include in my form. when I try to add 2 even with different classes it merges both into the same dropdown any ideas?

[@ridpathcreativepartnersllc9269]

Nelson - thank you for the video. Very cool that can be accomplished in webflow! I assume you hide the collection on the page?

[@pixelgeek]

Thanks for watching. Yes you can hide the collection list. Just don't delete it.

[@ridpathcreativepartnersllc9269]

@@pixelgeek Working on Saturday after the No Code Conference - you love what you do don't you.

[@febinchacko9992]

Thanks Nelson, Is there any way to connect the selected item to the form button?

[@alinaveed590]

Awsome work brother. I am wondering can I also add a dynamic attribute to select dropdown field.

[@Official..]

The dropdown was one of my road blocks... so thanks tremendously for this nelson! Is it possible to append native cms references/multi-references to a cms item in webflow via zapier? (webflow to webflow) This would be great for building community based sites using webflow forms.

[@pixelgeek]

I found this on the Webflow forums. I'll have to try this out myself: forum.webflow.com/t/using-zapier-with-multi-ref-fields-its-possible-nocode/99543 Hope this helps :)

[@Official..]

@@pixelgeek Awesome! Thanks Nelson! When i give it a try and let you know how things turn out.

[@lprater11]

Is there a way to take input from this cms dropdown through a Zapier and have it show up in the selection field of another CMS?

[@markjoncheff853]

Thanks Mate. Blessing and good tithings

[@bradleygilmoreprogramming]

What if we don't want the collection list to appear on that page?

[@artest83]

Hi Nelson! I was wondering if there was a way to set this up so you select say 'sort by state' or 'sort by name a to z' and it would adjust the collection list on the page?

[@pixelgeek]

hmm.... you might want to try using the new CMS Library by Finsweet - cmsdocs.webflow.io/

[@Dramko]

Hi. I would like to make a select field in which you can select an image from a database collection. I wonder if this is possible?

[@hendhourani3187]

It works!!!! Thanks :D

[@octaneflow1011]

i tried this and it didn't work. can you help?

[@keimaye]

Didn't work for me either - Jetboost it is

[@CaseyJayBensonwedding]

I got the list to populate but how do I get it to forward to my product link?

[@dominicnorton8337]

Hey, thanks for the tutorial Nelson. Is their a way to hide the collection list but still have the dropdown functionality?

[@pixelgeek]

yes. just set the collection list to have a display:none :)

[@dominicnorton8337]

@@pixelgeek Thanks!

[@mcoluxury]

how to create different dropdown menus for several categories

[@romainrouiller4889]

THANKS

[@joedoe7506]

so how we get rid of the item list on the left?

[@pixelgeek]

make sure you're not using the layout function in the collection list setting. Also, make sure all floats are disabled. Hope this helps :)

[@hmbhargavarajeurs3620]

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.

[@pixelgeek]

This may help you: finsweet.com/attributes/cms-select

[@eddiewhatson1800]

Nelson.. Webflow would be a desolate place without you 😆

[@pixelgeek]

Thank you so much. I really needed that today ♥️

[@madisonl]

Great video, thanks! But this should be native to Webflow.

[@pixelgeek]

It should. Hopefully one day.

[@abidhajher7076]

MF Legend my guy

[@hamishmaclean1629]

KZbin marketing train wreck. Squarespace ad plays after a Pixelgeek vid.

[@pixelgeek]

😬

[@asifdancer]

This video is really helpful. Can you create a tutorial like the navigation of this website : www.parall.ax .?

[@pixelgeek]

are you talking about how the top nav bar becomes a side nav bar as you scroll down?

[@asifdancer]

@@pixelgeek yes...

[@edithss9955]

$('.select-item').each(function(){ var s = $(this).text(); $('.select-field').append(''+s+''); })