Hi everyone.
I am using three dropdowns called #dropdown1, #dropdown2 and #dropdown4 in #dynamicDataset.
I have tried a few times with code to have the options in each of the three dropdowns filter the other two but cannot get it working.
Can anyone suggest some code where:
dropdown1 will filter dropdown2 and dropdown4
dropdown2 will filter dropdown1 and dropdown4
dropdown4 will filter dropdown1 and dropdown2
Any help is appreciated.
Sorry, fieldkeys are:
category for dropdown1
description for dropdown2
artNo for dropdown4
Hi @Alan_Boyle , I did a quick search of the forum and found some posts with a solution that may help you.
Thanks @Dan_Suhr .
I created this based on what I could find but it does not actually filter any of the dropdowns.
Can you see anything obvious to change?
import wixData from ‘wix-data’;
$w.onReady(function () {
// Set up event handlers for dropdowns
setupDropdownEventHandlers();
});
function setupDropdownEventHandlers() {
// Dropdown 1 (category) change event
$w(‘#dropdown1’).onChange((event) => {
filterDropdownOptions(‘category’, event.target.value, [‘dropdown2’, ‘dropdown4’]);
});
// Dropdown 2 (description) change event
$w('#dropdown2').onChange((event) => {
filterDropdownOptions('description', event.target.value, ['dropdown1', 'dropdown4']);
});
// Dropdown 4 (artNo) change event
$w('#dropdown4').onChange((event) => {
filterDropdownOptions('artNo', event.target.value, ['dropdown1', 'dropdown2']);
});
}
async function filterDropdownOptions(fieldKey, selectedValue, dropdownsToUpdate) {
// Build filter object based on selected value
let filter = {};
filter[fieldKey] = selectedValue;
// Clear options for dropdowns to update
dropdownsToUpdate.forEach((dropdownId) => {
$w(dropdownId).options = []; // Clear existing options
});
// Query dataset to get filtered options
let filteredItems = await wixData.query('dynamicDataset')
.eq(fieldKey, selectedValue)
.find();
// Update options for each dropdown based on filter result
dropdownsToUpdate.forEach((dropdownId) => {
let dropdownOptions = filteredItems.items.map(item => item[fieldKey]);
dropdownOptions = [...new Set(dropdownOptions)]; // Remove duplicates
// Update dropdown options
$w(dropdownId).options = dropdownOptions.map(option => {
return { label: option, value: option };
});
});
}
without testing it looks ok. Are you sure you have the correct data in the dataset ? Are you doing this in Studio or the classic editor ?
Hi @Dan_Suhr I’m using Studio.
I also don’t see why it’s not working.
Is there a simpler way of doing this?
You can connect dropdown elements to a dataset without any code. Is this what you are wanting ?
Hi @Dan_Suhr .
Not what I need assistance with.
I have three drop downs and I need a selection in either to filter the other two. All three are already connected to a dataset.
Ah… I see. Will have a look into it over the weekend.
Your code seems to be logically correct, but there’s a potential issue with the way the dropdown options are being updated. The filterDropdownOptions function is querying the dataset for items that match the selected value and then setting the options of the other dropdowns to the values of the same field from the filtered items. This means that the dropdowns are being updated with options that are all the same, which is likely not the intended behavior.
To update each dropdown with the unique values of its corresponding field from the filtered items, you’ll need to know the field key for each dropdown. You can modify the filterDropdownOptions function to accept an additional parameter, fieldKeys, which is an object that maps dropdown IDs to their corresponding field keys. Then, when updating the dropdown options, use the appropriate field key for each dropdown.
see if this will work, I have not tested.
async function filterDropdownOptions(fieldKey, selectedValue, dropdownsToUpdate, fieldKeys) {
// Build filter object based on selected value
let filter = {};
filter[fieldKey] = selectedValue;
// Clear options for dropdowns to update
dropdownsToUpdate.forEach((dropdownId) => {
$w(dropdownId).options = []; // Clear existing options
});
// Query dataset to get filtered options
let filteredItems = await wixData.query('dynamicDataset')
.eq(fieldKey, selectedValue)
.find();
// Update options for each dropdown based on filter result
dropdownsToUpdate.forEach((dropdownId) => {
let dropdownOptions = filteredItems.items.map(item => item[fieldKeys[dropdownId]]);
dropdownOptions = [...new Set(dropdownOptions)]; // Remove duplicates
// Update dropdown options
$w(dropdownId).options = dropdownOptions.map(option => {
return { label: option, value: option };
});
});
}
And here’s how you would call this function in the onChange event handlers:
$w('#dropdown1').onChange((event) => {
filterDropdownOptions('category', event.target.value, ['dropdown2', 'dropdown4'], {
'dropdown2': 'description',
'dropdown4': 'artNo'
});
});
$w('#dropdown2').onChange((event) => {
filterDropdownOptions('description', event.target.value, ['dropdown1', 'dropdown4'], {
'dropdown1': 'category',
'dropdown4': 'artNo'
});
});
$w('#dropdown4').onChange((event) => {
filterDropdownOptions('artNo', event.target.value, ['dropdown1', 'dropdown2'], {
'dropdown1': 'category',
'dropdown2': 'description'
});
});
Thanks @Dan_Suhr .
There is still no filtering happening when any of the dropdowns are selected.
This is filtering a dynamic page.
I havnt had time to do any testing so cant really comment on why the code is not working correctly. Will see if I can look at this week some time.