You can create dropdown lists by connecting your dropdown to your data, as described here.
3shtar wants to do this, but has duplicates in the field they want to connect and wants to know if there's a way to remove these duplicates so the dropdown options only display one selection per value. The answer is yes, but it takes some code and means you will connect your table using code and not the Connect panel.
The code below runs a query that returns all the the items in a collection. It then creates an object that contains only the data from one field ("Title"). It removes any duplicates from the object and then creates an object with the format: {label:Title, value:Title} which can be assigned to the options property of a dropdown.
To use this example you'll need to replace:
"dishes" with the name of your collection
"Title" with whichever field in your collection you want to use to create your dropdown options
"#selection1" with the ID of your dropdown element
Note that since you are connecting your table with code, you may need to set up the columns in your table using the columns property so they display the way you want.
import wixData from 'wix-data';
$w.onReady(function () {
// Run a query that returns all the items in the collection
wixData.query("dishes")
// Get the max possible results from the query
.limit(1000)
.find()
.then(results => {
// Call the function that creates a list of unique titles
const uniqueTitles = getUniqueTitles(results.items);
// Call the function that builds the options list from the unique titles
$w("#selection1").options = buildOptions(uniqueTitles);
});
// Builds an array from the "Title" field only from each item in
// the collection and then removes the duplicates
function getUniqueTitles(items) {
// Use the map method to create the titlesOnly object containing all the titles from the query results
const titlesOnly = items.map(item => item.title);
// Return an array with a list of unique titles
return [...new Set(titlesOnly)];
}
// Creates an array of objects in the form {label: "label", value: "value"} from the array of titles
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
// Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle}
return {label:curr, value:curr};
});
}
});
Hi Jeff, I believe I've followed your code but it is not working on my side and I don't have any error message. Can you kindly advice? Many thanks!!!!!!
Hello,
I tried to follow the instructions but I still have this error message. Can you please advise ? Thanks
"Wix code SDK Warning: The selectOption parameter at index 0 that is passed to the options function cannot be set to [object Object]. Options must contain either a non-null value or a non-null label"
hi jude,
just i need codes for dropdown removing duplicates,
i have five dropdowns
Problem 1
dropdown1 is - category
dropdown2 - sub category
its connected to dataset3
collection is AddCategory
dataset3
if i select the dropdown1 its showing service,property twice and vehicle three times,
but i need category showing with out duplicates & when i select the dropdown1 after enable the dropdown2
Problem 2
dropdown3 - province
dropdown4 - location
dropdown5 - sublocation
its connected dataset4
collection is Location
dataset4
if i select the dropdown3 its showing central,northern & western in twice, but i need province will show with out dublicates,
when i select the dropdown3 after enable dropdown4
if i select the dropdown4 its showing kandy,jaffna,colombo twice, but i need location will show with out dublicates,
when select the dropdown4 after enable dropdown5.
can i get good solution for this two problems??
THANK YOU, THANK YOU, THANK YOU, Jeff, for the clear and accurate example. What a life saver that was. MOST appreciated. : -)
WOOOW,
hello @Jeff (Wix)
hello community,
thanks for sharing this nice tutorial.
I fixed and managed to remove the duplicates to select certain times in my database.
if i select one of this "shifts" STILL all entries are visible in my repeater.
my code whole code :
also if I ADD the code:
$w("#repeater1").show();
or
$w("#container1").show();
in line 33 it doesnt work. ;-(
REPEATER is connected to: "Stundenliste2"
RESULT:
CUTTING the time-format is a different issue, but that is off topic here.
can´t imagine it belongs together!??
ANY tips and tricks for a REAL NEWBIE!?!?
thx in adavance and greetings from vienna/austria
thomas
Thanks @Jeff (Wix),
I created two dropdowns connected to each other, without using code. Currently I have problems in duplicating values. I tried to enter your code by changing it with my values but nothing happens, keep giving duplicates. Do you have other alternatives?
link:https://lucaesp990.wixsite.com/clpbus/projects
Hi Jeff,
Thanks for this duplicate code.
I've added it and it is working. However, it isn't linked to the first dropbox selection. I want the second dropbox to change depending on selection made in the first dropbox, displaying no duplicates in the second dropbox.
I had it working so the second dropbox content was dependent on first dropbox selection but it was displaying duplicates.
So I just need to combine the two pieces of code but don't know how. Can you help me please!
Your help is really appreciated.
https://vanpower.wixsite.com/aeairl/meetings
Many thanks,
Vanessa
Hey guys. i am having an issue.
I am doing a website that shows all of the different atms we have.
I did dynamic pages with no problem, but when linking my lightbox menu to show what cities we are in, i am getting duplicate results.
I tried creating a filter, but that did not help.
Is this something I can do without an actual script and onyl through dataset settings?
Please help
Gostei demais!
Hi Greg,
Thanks for the suggestion. This solution ends up creating two or more dropdown boxes, if my understanding is correct. What I'm trying to achieve is:
- Use a dropdown box to show the values from the primary field of collection1.
- Collection2 has a reference field which is connected to collection1's primary field.
- I have a page where both collections appear. I set up a dropdown box that's connected to collection1's primary field.
- Through Wix code I want to show all records in a table from collection2 on this page that match the dropdown value.
- Only one dropdown box is used.
I hope ther's a solution for this.
Thanks.
My code that filters make, model and year. You need to make sure you set your dataset ID to the fields you want to filter.
import wixData from 'wix-data'; $w.onReady(function () { uniqueDropDown1(); }); function uniqueDropDown1 (){ wixData.query("MakeModel") //my dataset name .limit(1000) .ascending('makes') .find() .then(results => { const uniqueTitles = getUniqueTitles(results.items); $w("#imake").options = buildOptions(uniqueTitles); }); //"#imake" is my drop down name function getUniqueTitles(items) { const titlesOnly = items.map(item => item.makes); //makes is dataset ID return [...new Set(titlesOnly)]; } function buildOptions(uniqueList) { return uniqueList.map(curr => { return {label:curr, value:curr}; }); } } export function imake_change(event, $w) { uniqueDropDown2(); $w("#imodel").enable(); //endables drop down 2 afer drop down 1 is selected } function uniqueDropDown2 (){ wixData.query("MakeModel") .contains("makes", $w("#imake").value) //matches models based upon "#imake" drop down .limit(1000) .ascending('model') .find() .then(results => { const uniqueTitles = getUniqueTitle(results.items); $w("#imodel").options = buildOption(uniqueTitles); }); function getUniqueTitle(items) { const titlesOnly = items.map(item => item.model); //filters repeat models return [...new Set(titlesOnly)]; } function buildOption(uniqueList) { return uniqueList.map(curr => { return {label:curr, value:curr}; }); } } export function imodel_change(event, $w) { uniqueDropDown3(); $w("#iyear").enable(); } function uniqueDropDown3 (parameter) { wixData.query("test") .eq("model", $w('#imodel').value) .limit(1000) .ascending("vYear") .find() .then(results => { const uniqueTitles = getUniqueRimtest(results.items); $w("#iyear").options = buildRimtest(uniqueTitles); }); } function getUniqueRimtest(items) { const titlesOnly = items.map(item => item.vYear); return [...new Set(titlesOnly)]; } function buildRimtest(uniqueList) { return uniqueList.map(curr => { return {label:curr, value:curr}; }); }
Bhumasena try watching this video and see if it helps you.
Greg
https://www.youtube.com/watch?v=EhXed0u6wh0&t=514s
Dear Jeff,
I've been trying to design my web page in Wix for the past 2 weeks. I tried to present a dropdown list populated with the contents of a field in one collection which was liked to a second collection. While the dropdown pulled data from the first collection, finding the resultant item in the referenced field of the second table became difficult for me. This became beyond my capacity. As a workaround, I removed the reference field, and entered data directly into the second collection at the risk of duplicating information. The first collection then became redundant. But then the dropdown list has become unwieldy with repetitive information. The "remove duplicates" code that you had shown in this forum was exactly what I was looking for. Thank you! If only I knew how to compare the results of a dropdown to the data in a reference field, that would have been a straight forward solution.
Dear Jeff,
I've been trying to design my web page in Wix for the past 2 weeks. I tried to present a dropdown list populated with the contents of a field in one collection which was liked to a second collection. While the dropdown pulled data from the first collection, finding the resultant item in the referenced field of the second table became difficult for me. This became beyond my capacity. As a workaround, I removed the reference field, and entered data directly into the second collection at the risk of duplicating information. The first collection then became redundant. But then the dropdown list has become unwieldy with repetitive information. The "remove duplicates" code that you had shown in this forum was exactly what I was looking for. Thank you! If only I knew how to compare the results of a dropdown to the data in a reference field, that would have been a straight forward solution.
I´m trying to do it in a table, but i could.
My database exemple:
| NAME | EMAIL | REGION | CITY | IDNUMBER |
| A | a@a.com | RegionA | X | 123 |
| A | b@b.com | RegionA | X | 123 |
| A | c@c.com | RegionA | X | 123 |
| B | x@x.com | RegionA | Y | 321 |
| B | y@y.com | RegionA | Y | 321 |
| C | h@h.com | RegionA | X | 456 |
| D | j@j.com | Region B | B | 890 |
And i Need this table as result:
| NAME | REGION | CITY |
| A | RegionA | X |
| B | RegionA | Y |
| C | RegionA | X |
Could someone help me?
I got this sort of working. My .limit(1000) isn't letting 1000 records enter. In this example my vehyear in my database is 1964 - 2018. It is only loading 1964 - 1988. Anyone notice something that maybe a limiting factor?
Hey berkleyautoinc,
Yeah, you can do what you want in the dropdown and I can point you in the right direction but you'll need to work out the code. You would need to query your collection for each of the items in the dropdown and then use the totalCount property to see how many items match that value. Then you would just build the option string in the dropdown with that information.
In terms of display, you should check out repeaters.
-Jeff
Hi Greg,
Yup, still here but not getting to post as much as I'd like lately. I'm sorry but I'm only responding to questions or problems with the topics I post. I just don't have the bandwidth to provide that support. You'll have to go to the QA section for help.
-Jeff
Jeff, wondering if you are still with wix and if I could get some input from you for a site I am working on.
Thanks
Greg
Hey Jeff!
Really appreciate you taking the time to post this and respond to readers' questions. I'm new to coding but took a stab at this and got below errors. Code is immediately below. Showed no errors in editor mode. Any chance you would be able to assist? Thanks again for taking the time to help us out