Unique List on Multiple Dropdown that are Linked Directly to Your Data Collection

Reading through the discussion posted by @Yisrael (wix) here: https://www.wix.com/velo/forum/tips-tutorials-examples/example-remove-duplicates-from-connected-dropdown-options-using-distinct-query, his very helpful tips on using distinct() to build a unique dropdown list has helped to lean up my code tremendously. However, this function is only applicable when you do a wixData.query on information from your collection and not the dataset. So if you have set a "filter" function in your dataset that is connected to your dropdown, you won't be able to use this function to generate another unique dropdown list for a second dropdown you're building for your site.

So from the question of some of the comments from the original forum, I thought I'll try out integrating multiple different codes to allow multiple dropdown that filter out the unique list of each other which I found difficult finding the answers from other examples given. So here you go:

Example of Elements on the website

Dropdown A: List of Country; $w('#ListofCountryDropdown')

Dropdown B: States/Region; $w('#StatesRegionDropdown')

Dropdown C: Name of Hotels; $w('#NameofHotelDropdown')

Collection Name ("Listing") - please click on the 3 dots next to the database created of your choice and select "Edit Setting" to find the Collection name. Please ensure that you copy the exact name in the setting else it won't work.

Collection Layout - if you open up your database, every column in that database, when you look into the properties of that column, will have a field name and field key. The Column Name that I've included here would be the field key.

Column Name 1 = listOfCountry

Column Name 2 = statesRegion

Column Name 3 = nameOfHotels

Sample Code

import wixData from 'wix-data'; $w.onReady(function () {

function DropdownListUpdate() { let ListofCountry = $w('#ListofCountryDropdown').value let StatesRegion = $w('#StatesRegionDropdown').value let NameofHotel = $w('#NameofHotelDropdown').value let ListUpdate= wixData.query("Listing") if (ListofCountry) {ListUpdate= ListUpdate.eq("listOfCountry",ListofCountry)} if (StatesRegion) {ListUpdate= ListUpdate.eq("statesRegion",StatesRegion)} if (NameofHotel) {ListUpdate= ListUpdate.eq("nameOfHotels", NameofHotel)}

function Options(items) {

return items.map (curr=>{

return {label:curr, value:curr}

})

}

function CountryDropdown() { ListUpdate .limit (1000) .ascending("listOfCountry") .distinct("listOfCountry") .then(results => { let CountryList = Options(results.items); $w('#ListofCountryDropdown').options = CountryList; })

} CountryDropdown()

function StatesRegionDropdown() { ListUpdate .limit (1000) .ascending("statesRegion") .distinct("statesRegion") .then(results => { let StatesRegionList = Options(results.items); $w('#StatesRegionDropdown').options = StatesRegionList ; })

} StatesRegionDropdown()

function HotelsDropdown() { ListUpdate .limit (1000) .ascending("nameOfHotels") .distinct("nameOfHotels") .then(results => { let HotelList = Options(results.items); $w('#NameofHotelDropdown').options = HotelList ; })

} HotelsDropdown()

}

DropdownListUpdate()

$w('#ListofCountryDropdown').onChange(()=>{DropdownListUpdate(); })

$w('#StatesRegionDropdown').onChange(()=>{DropdownListUpdate(); })

$w('#NameofHotelDropdown').onChange(()=>{DropdownListUpdate(); })

}

Code Explanation

To run a distinct() function, you must perform a wixData.query. To run a wixData.query, you must first import wixData. So the first line of your code must be import wixData from "wix-data";

Then as always, if you want the function to work, you need on ready your function: $w.onReady(function () {}

Because you can only run the distinct() function using wixData.query which as I've said are connected to your collection where else all filter functions are connected to your dataset, hence why there is no filter function that can narrow down your query list to provide that multiple filter affect to your multiple dropdown. However, a query function also allows specific "filtering" ability by using the eq() or contains() function that will be the key to building this multiple filtering effect.

The first function: DropdownListUpdate() need to be run the moment the site start up to build up your first list of drop down. Hence why you will see the function being called after I've closed the code to the function. As the drop down list need to be refresh every time something is selected, you then see the onChange function that was set which basically say, on changes made to the drop down, update the information within the drop down to update the list within the drop down.

I'm also a rather beginner to wix code and have gotten this after multiple reading up of the API and testing the codes on my own website. It works perfectly on mine but if you have any issue putting this up for yourself, you can leave a comment and I'll see what I can do to help.

I'm not working for wix, so please don't expect an immediate response if you are leaving a comment. I'm just posting this because a lot of posting on this forum has helped me build my codes and I thought I can help others with this.