🔽 Select Dropdown

There is a small mistake at the beginning of the video below: in the “Add elements” sub-menu, you should look for the “14 – Select” element, not “2 – Dropdown.”

In WeWeb, we have two dropdown elements:

  • The 2 – dropdown element that you can style and would use in a navigation menu for example
  • The 14 – select element that you can’t style as beautifully but can bind to a collection list and use to filter a collection

In this tutorial, we’re going to show you how to use the 14 – select element.

Screenshot 2022-02-04 at 11.05.32

This will enable your users to filter through items on a page. For example, to select only job offers in the Marketing category.



On the page, you have at least two elements:

  1. the 14 - select element as shown above
  2. a collection list element

In your data sources, you have at least two collections and these two collections have at least one field in common:

  1. one collection with a list of categories. In our example below, we’ll use a “Locations” collection with a list of car rental locations
  2. one collection with the data you want to filter. In our example below, we’ll use “Fleet” collection with a list of rental cars with the mileage of the cars and the car rental locations

Keep in mind that, if you want to filter data based on several select dropdowns, you’ll need several select dropdown elements and one collection for each select dropdown.

The way to think about it: one filter condition = one select element = one collection.

Step 1 – Bind the select dropdown

In our case, we’re binding to the “Locations” collection that has 6 rental car locations:

bind dropdown to list of categories

Note that, in the right sidebar, we made sure to change the “Display field” and “Value field” to correspond to what we want to filter by, i.e. the Location name.

Step 2 – Bind the Collection List

In our case, we’re binding the “Fleet” collection that includes all our cars at all the locations BUT we’re adding a couple of no-code formulas to display only the cars for which the “Location” field is the same as the value in the “dropdown - value” variable which you can see in the left sidebar:

bind and filter collection list with all data

What our formula is saying above:

  • if the dropdown value is nothing, then display all the data from the collection
  • otherwise, check the “Location” field (the “key” in coding terms) in the collection (an “array” or “list” in coding terms) and display the items where the “Location” field has the same value as the “dropdown - value” variable

There you go! That’s all there is to it 🙂

🔥 Pro tip 🔥

When you hover on a no-code function in the editor, you can see help text that explains how the function works.

Last modified on

April 6, 2022