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: How to Webflow: Adding data from Collections to Select Dropdown fields - YouTube).

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.

https://preview.webflow.com/preview/ajax-load-team-members?utm_medium=preview_link&utm_source=dashboard&utm_content=ajax-load-team-members&preview=3299a976af313cafcd2f00eab1dd2355&mode=preview

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.

@webdev ey @Reed Reed, Did you find the working solution?

I’m facing similar challenge in one of the builds where I only want to render the pricing on a input field coming from the cms item based upon the user selection of a country name coming from the cms.

Only want to tender the pricing that is related to the chosen country name which is coming from the cms.

@webdev Can you please help me here by explaining the concept in here?

Cc @Reed

Thanks