Hello WixCode Forum,
I would really appreciate your help. I’ve been struggling to get this working.
https://vanpower.wixsite.com/aeairl/meetings-test (Once site is ready to go we’ll upgrade to premium.)
I’m trying to filter the second dropdown dependent on whats selected in the first dropdown. However, it doesn’t seem to be working with the code I’m using. Should work from what I can make out.
Would you be able to see what the issue is?
Many thanks for your help!
Vanessa
See the Cascading Form example to see how to do this.
Many thanks for your help. I’ll check it out.
Hi Yisrael, This example looks great. However, I’m looking at creating a cascading dropdown from datasets.
This is the code I’m using. Sorry for the use of generic ‘dropdown1’ and ‘dataset1’. I couldn’t see where I could change these.
Can you see where I’m going wrong here?
Many thanks for your help!!
import wixData from ‘wix-data’;
$w.onReady( function () {
});
export function dropdown1_change(event, $w) {
$w(“#dropdown2”).enable();
locationCityFilter();
}
function locationCityFilter (){
$w(“#dataset1”).setFilter( wixData.filter()
.eq(“Country”, $w(“#dropdown1”).value)
);
}
@vanpower One thing I noticed:
You need to use Field Key (not Field Name) in a filter condition:
You do not want this:
.eq(“Country”, $w(" #dropdown1 ").value)
You want this:
.eq(“country”, $w(" #dropdown1 ").value)
I hope this helps.
@yisrael-wix Hi Yisrael.
That was such a great help! Thank you. I got the code working for both dropdowns. So chuffed.
https://vanpower.wixsite.com/aeairl/meetings-test
I just need to figure out removing the duplicate cities now from second dropdown.
Thanks again.
Vanessa
@vanpower Maybe the Remove Dropdown Duplicates example will help with the step.
@yisrael-wix Hi Yisrael,
Thanks for your help.
So I’ve added in your Remove Dropdown Duplicates code on the second dropdown. And it works!
However, it’s not connected with the first drop down selection and it doesn’t display what’s selected in second dropdown.
Im just missing how to connect that Remove Dropdown Duplicates code with my first dropdown selection. I think it may need to be triggered on change of the dropdown and not on page load. I’m just not sure.
Would you have two minutes to look at it for me? I’d so appreciate it. It’s the last thing left to sort on the website before we go live with it! (and Premium)
I really appreciate your help.
I’ve learnt a load so far. Thanks so much.
https://vanpower.wixsite.com/aeairl/meetings
Vanessa
See code below. I just need to know how to connect the Duplicates Code with my second dropdown. There’s code for that below that was working but producing the duplicates.
import wixData from ‘wix-data’;
$w.onReady( function (){
// Run a query that returns all the items in the collection
wixData.query(“Meetings”)
// 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(“#dropdown2”).options = buildOptions(uniqueTitles);
console.log(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.newField);
// 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};
});
}
});
// First dropdown code. Listing the Countries
export function dropdown1_change(event, $w) {
$w(“#dropdown2”).enable();
locationCountryFilter();
//uniqueDropDown1();
}
function locationCountryFilter (){
$w(“#dataset1”).setFilter( wixData.filter()
.eq(“title”, $w(“#dropdown1”).value)
);
}
// Second dropdown code. Listing the Cities
//This is what I had in for the second dropdown that was working but was producing the duplicates. So how do I connect your duplicates code to this? I have it commented out while I was adding your Duplicate Code. Help here so appreciated! Thanks.
/*export function dropdown2_change(event, $w) {
$w(“#dropdown2”).enable();
locationCityFilter();
}
function locationCityFilter (){
$w(“#dataset1”).setFilter( wixData.filter()
.eq(“newField”, $w(“#dropdown2”).value)
);
}
*/
THANK YOU!!
@vanpower I looked at your site and the only code I see for removing duplicates is commented out.
If you need to remove duplicates from another dropdown, use the same code. You need to copy the code for the first dropdown, and then change the code to use the relevant fields for the second dropdown.
@yisrael-wix Thanks Yisrael. So I’ve changed the duplicate code for the second dropdown ( As that’s the only dropdown with duplicates). It works on page load yahoo! How do I change it so it’s triggered when the first dropdown is selected?
So I need the results displayed in the second drop down, which is dependent on first dropdown selection, to have no duplicates. Just not sure how to remove duplicates there, not on page load, as per your code. Does that make sense?
Also, do you know how I would hide all the elements on page load. So only display results once dropdowns are selected?
Here’s the page again. https://vanpower.wixsite.com/aeairl/meetings
Your help is really appreciated. We’re just finishing up the site now. Thanks so much.
