Display CMS item based on a dropdown selection

Hi there,

I’m trying to create a comparison page for items I have in a CMS collection. I’d like to allow the user to select a CMS item in a dropdown and then have the information from the CMS item displayed below.

Is there a way to do this in webflow?

1 Like

If you want to control page load size you could use a dropdown to load content in another element via an Ajax call in custom code. The other option would be to have all the content loaded on the page but hidden, revealing the correct element on select. At the moment I can’t think of a way to do this without custom code.

Gotcha. I’ve been playing around with some custom code elements. One idea reads CMS item names from a hidden CMS collection to the select field (as shown in this video: https://www.youtube.com/watch?v=y4uD_NX__OQ).

However, populating data on the same page is proving more difficult. I’d like to be able to say, “if dropdown = CMS name ‘x’, then display values ‘a’, ‘b’, ‘c’.”

I recently shared a demo of using a collection list with buttons, loading more details from a collection template page for an item via Ajax. It was built as a proof of concept and you should be able to use it as a model for your particular use case.

1 Like

That’s a logic issue that can be solved by having the data in the collection item that code can grab the values for and then be used.

Hey Jeff. Your site/link isn’t working anymore. :slight_smile:

I do have another question. Most of us used this video to build a CMS selector. How would you Ajax/display other CMS items out of the same collection based on which option is selected?

Project loads fine and so does the published URL where you can see it work → Ajax Load Team Members (webflow.io). Not sure what you are referring to. JS does not render in the designer maybe? That is normal.

As for your additional question you might want to post that in the freelance category.