You can create dropdown lists from your data

Wix Code gives you a lot of control over your dropdown lists and how they work with your data.

You can manually define the list labels (what your visitors see) and their values (the value you save based on their selection) in the Manage Drop Down List panel . But you can also automatically create a dropdown list from a field in your collection.

To do this, open the Connect to data panel for your dropdown and go to the Connect a List section. There are a few things to remember when you connect a dropdown list to your data.

  • The collection you use to maintain your dropdown list does not have to be the same collection you use to store your user data.

  • If you connect a dropdown list to your data it overrides the settings in the Manage Drop Down List panel. Also, both the labels and values of each item will be the same, based on your data. They cannot be set independently as you can in the Manage Drop Down List panel.

3 Likes

Dear Jeff,

when connecting drop down to data set, the drop down shows the exact list in the data set. Sometimes the Data set is repeated and we only want to show the list in drop down without the repeated value
e.g
data set is city
list is
New York
Washington
Alabama
California
Washington
Washington
Washington
Alabama

the drop down will show as above but what we really looking to show is:
New York
Washington
Alabama
California

Any help with that

thank you

Hey 3shtar

Unfortunately thereā€™s no easy way to do what you are asking in the UI. You would have to use a fair bit of code to get that done. Briefly, you would need to query the collection for the field you want to use as your list, remove the duplicates from the results of that query, and then use that list as the dropdown options list .

In this scenario you arenā€™t using the feature as I described it above, you are using code to create the same effect. Let me know if you are interested in trying to implement this and if you need help.

dear Jeff

it would be great if you share the query method of removing duplicates by code, who knows, it might help some who are looking for this.
thank you

Yes, Jeff that code snippet would be very helpful. It would be even neater if we could filter it based on another column value. So, show only cities and not states based on a separate column that identifies whether a given value is a city or a state.

Hey 3shtar and rsuri.1 take a look here for the code 3shtar asked for.

rsuri.1, I think this example is very close to what you want to accomplish. You just need to change the ā€œifā€ to check the value in the other column you referred to, instead of it checking the other dropdown selection.

Is there anyway to connect that drop down list with say a picture file? So when a drop down is choosen an image from the database is shown?

Just love the power of wix code. Just getting started. Trying to display a list of instructors in the Activities page on the Instructors Name dropdown.

It works 100% in the editor


But in the live siteā€¦


Both collections have the same Data type (Text).
Can anyone help me?

And you have synced the data from sandbox to live? And you have set the permissions on the data collection so everyone can read from it?

Thank you Andreas.
I checked the permission settings for the Collection I wanted to display in the Dropdownā€¦ and there it wasā€¦
Permissions for Admin ONLY.
I changed it to ANYONE - now it is working!!
Thanx again.

Hey Scott,
You canā€™t do what you asked. Sorry. You can always add it to the Feature Requests.
-Jeff

Hi Jeff,

Thank you so much for all the information you are giving. I have a search and two drop-downs to filter a gallery, search and first drop-down work, but the second one (categoria) doesnā€™tā€¦ It doesnā€™t return any resultsā€¦ Would it be possible for you to help me?

Thanks in advance!

import wixData from ā€œwix-dataā€;

let lastFilterTitle;
let lastFilterUbicacion;
let lastFilterCategoria;

let debounceTimer;
export function iTitle_keyPress_1(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(ā€˜#iTitleā€™).value, lastFilterUbicacion);
}, 200);
}

function filter(title, ciudad, categoria) {
if (lastFilterTitle !== title || lastFilterUbicacion !== ciudad || lastFilterCategoria !== categoria) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains(ā€˜titleā€™, title);
if (ciudad)
newFilter = newFilter.eq(ā€˜ciudadā€™, ciudad);
if (categoria)
newFilter = newFilter.eq(ā€˜categoriaā€™, categoria);
$w(ā€˜#dataset1ā€™).setFilter(newFilter);
lastFilterTitle = title;
lastFilterUbicacion = ciudad;
lastFilterCategoria = categoria;
}

}

export function iCity_change_1(event, $w) {
filter(lastFilterTitle, $w(ā€˜#iCityā€™).value);
}

export function dropdown1_change(event, $w) {
filter(ā€˜categoriaā€™, $w(ā€˜#dropdown1ā€™).value);
}

Hey Andres,
Please post this to the Q&A forum. Thanks

I have implemented a dropdown using a database collection using the selection to filter a subsequent dropdown from another database collection. Iā€™m using this to build a quote request. I want the user to be able to be able to make additional selections from the same drop downs. To make it clear to the user Iā€™d like the dropdowns to revert to their placeholder text. I have not been able to figure out how to make this happen. It will occur when a user presses a button so I have an event handler to put the code in I just canā€™t figure out how to trigger the dropdowns to go back to their placeholder text. (Iā€™d like the user to be able to reuse these dropdowns several times not just twice.)

Tried setting the .value = ā€™ '; as seen in sample code in this thread and it fixed my problem!

@jeff-wix I have started building a fairly extensive database collection. However, is there a limit on how many entries will show in a drop down. After adding quite a bit to the database, finding that only a portion of the categories are showing up in the drop down menu???

While on topicā€¦if a database is created say in Excel, and you edit and manipulate the order of items, etc. You then import the list to the Wix database, what will the order of items be in the database column in Wix?

Could someone please help meā€¦ I am new to wix codingā€¦


So I have this list- I want the bottom two 'bathroom fixtures & Staffroom fixtures to expand and collaspe when clicked.

So when for example 'Bathroom fixtures is clicked it will show another list
-Hooks
-Shelves
-Soaps dishes
etc

Hey @jeff-wix , I am trying to setup a dynamic page that uses a dropdown menu to go to the different pages, Iā€™m a little more than stuck. Iā€™ve attached screenshots of what Iā€™m trying to doā€¦

The website layout (Excuse the mess, Iā€™ve decided to redesign the whole website this time around corvid elements)

The menu fades out (It doesnā€™t drop down, it is supposed to act as a menu)


This is the data it is using:


All of the posts Iā€™ve looked at are older, and link to resources but it is difficult to understand without much explaination (as this is the best way for me to learn what I need to do in order to remember it for next time.)

It would be best if it was step by step with reasoning explained to make it as helpful as possible.

Sorry for the inconvenience,
-Alain

Please note that in this forum we do not provide custom coding solutions. If you feel like youā€™re struggling with code and canā€™t make it alone, please visit our WixArena where you can find pro designers and developers to help you build your site.

If you would like to try to figure this out yourself, you can look at these examples that demonstrate using Dropdown: