# Filter using multiple filter dropdowns

**URL:** <https://forum.wixstudio.com/t/filter-using-multiple-filter-dropdowns/58013>\
**Category:** Ask the community\
**Tags:** code\
**Created:** [April 11, 2024, 3:52am UTC](https://forum.wixstudio.com/t/filter-using-multiple-filter-dropdowns/58013 "2024-04-11T03:52:47Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alan\_Boyle](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/alan_boyle/32/90736_2.png) [@Alan\_Boyle](https://forum.wixstudio.com/u/Alan_Boyle)\
**Post date:** [April 11, 2024, 3:52am UTC](https://forum.wixstudio.com/t/filter-using-multiple-filter-dropdowns/58013/1 "2024-04-11T03:52:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Alan\_Boyle](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/alan_boyle/32/90736_2.png) [@Alan\_Boyle](https://forum.wixstudio.com/u/Alan_Boyle)\
**Post date:** [April 11, 2024, 3:53am UTC](https://forum.wixstudio.com/t/filter-using-multiple-filter-dropdowns/58013/2 "2024-04-11T03:53:56Z")

</div>

Sorry, fieldkeys are:

category for dropdown1  
description for dropdown2  
artNo for dropdown4

---

<div class="post-metadata">

**Author:** ![Dan\_Suhr](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dan_suhr/32/94074_2.png) [@Dan\_Suhr](https://forum.wixstudio.com/u/Dan_Suhr)\
**Post date:** [April 11, 2024, 4:19am UTC](https://forum.wixstudio.com/t/filter-using-multiple-filter-dropdowns/58013/3 "2024-04-11T04:19:21Z")

</div>

Hi @Alan_Boyle , I did a quick search of the forum and found some posts with a solution that may help you.

> [@\[SOLVED\] The same code doesn't work on another site (dropdown filters)](https://forum.wixstudio.com/t/solved-the-same-code-doesnt-work-on-another-site-dropdown-filters/10447/7):
>
> @ahmadnasriya Oh, yes thanks!! It’s fixed now, thank you so much for your help If others have the same issue, here’s the code that worked for me: import wixData from 'wix-data'; $w.onReady(() =\> { $w('#dropdown2').onChange((event) =\> { let filterType = $w('#dropdown2').value; if (filterType === "Tout"){ $w('#dataset1').setFilter(wixData.filter()); } else{ $w('#dataset1').setFilter(wixData.filter().contains("type", filterType)); } }) }) Have a nice day …

> [@Help with multiple dropdown's to filter a dataset and populate a repeater with results using WIX Code](https://forum.wixstudio.com/t/help-with-multiple-dropdowns-to-filter-a-dataset-and-populate-a-repeater-with-results-using-wix-code/13402):
>
> Hi everybody, I’m not going to bore you with my life story and get straight to the point. What I’m looking to create are three dropdown’s with three options for “type” , “location” and “price” . Which then populate “repeater1” with the results filtered from “dataset1” after choosing one or all of the options available and clicking on the “search” button. It would look something like this: I have been working on this for a few weeks and tried so many different options and tutori…

---

<div class="post-metadata">

**Author:** ![Alan\_Boyle](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/alan_boyle/32/90736_2.png) [@Alan\_Boyle](https://forum.wixstudio.com/u/Alan_Boyle)\
**Post date:** [April 11, 2024, 6:54am UTC](https://forum.wixstudio.com/t/filter-using-multiple-filter-dropdowns/58013/4 "2024-04-11T06:54:51Z")

</div>

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 };
    });
});

```

}

---

<div class="post-metadata">

**Author:** ![Dan\_Suhr](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dan_suhr/32/94074_2.png) [@Dan\_Suhr](https://forum.wixstudio.com/u/Dan_Suhr)\
**Post date:** [April 11, 2024, 10:29pm UTC](https://forum.wixstudio.com/t/filter-using-multiple-filter-dropdowns/58013/5 "2024-04-11T22:29:22Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![Alan\_Boyle](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/alan_boyle/32/90736_2.png) [@Alan\_Boyle](https://forum.wixstudio.com/u/Alan_Boyle)\
**Post date:** [April 11, 2024, 11:32pm UTC](https://forum.wixstudio.com/t/filter-using-multiple-filter-dropdowns/58013/6 "2024-04-11T23:32:25Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Dan\_Suhr](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dan_suhr/32/94074_2.png) [@Dan\_Suhr](https://forum.wixstudio.com/u/Dan_Suhr)\
**Post date:** [April 12, 2024, 12:10am UTC](https://forum.wixstudio.com/t/filter-using-multiple-filter-dropdowns/58013/7 "2024-04-12T00:10:28Z")

</div>

You can connect dropdown elements to a dataset without any code. Is this what you are wanting ?

([Watch - Screencastify](https://app.screencastify.com/v3/watch/GJOS2CsZDajG8fgcMm5x))

[https://dcidesigns.wixstudio.io/dynamicfilter](https://dcidesigns.wixstudio.io/dynamicfilter)

---

<div class="post-metadata">

**Author:** ![Alan\_Boyle](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/alan_boyle/32/90736_2.png) [@Alan\_Boyle](https://forum.wixstudio.com/u/Alan_Boyle)\
**Post date:** [April 12, 2024, 8:32pm UTC](https://forum.wixstudio.com/t/filter-using-multiple-filter-dropdowns/58013/8 "2024-04-12T20:32:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Dan\_Suhr](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dan_suhr/32/94074_2.png) [@Dan\_Suhr](https://forum.wixstudio.com/u/Dan_Suhr)\
**Post date:** [April 12, 2024, 11:46pm UTC](https://forum.wixstudio.com/t/filter-using-multiple-filter-dropdowns/58013/9 "2024-04-12T23:46:30Z")

</div>

Ah… I see. Will have a look into it over the weekend.

---

<div class="post-metadata">

**Author:** ![Dan\_Suhr](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dan_suhr/32/94074_2.png) [@Dan\_Suhr](https://forum.wixstudio.com/u/Dan_Suhr)\
**Post date:** [April 15, 2024, 1:27am UTC](https://forum.wixstudio.com/t/filter-using-multiple-filter-dropdowns/58013/10 "2024-04-15T01:27:34Z")

</div>

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.

```javascript
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:

```javascript
$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'
    });
});

```

---

<div class="post-metadata">

**Author:** ![Alan\_Boyle](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/alan_boyle/32/90736_2.png) [@Alan\_Boyle](https://forum.wixstudio.com/u/Alan_Boyle)\
**Post date:** [April 15, 2024, 11:12am UTC](https://forum.wixstudio.com/t/filter-using-multiple-filter-dropdowns/58013/11 "2024-04-15T11:12:22Z")

</div>

> [@Dan\_Suhr](#):
>
> ```javascript
> $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.

---

<div class="post-metadata">

**Author:** ![Dan\_Suhr](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dan_suhr/32/94074_2.png) [@Dan\_Suhr](https://forum.wixstudio.com/u/Dan_Suhr)\
**Post date:** [April 15, 2024, 10:01pm UTC](https://forum.wixstudio.com/t/filter-using-multiple-filter-dropdowns/58013/12 "2024-04-15T22:01:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![FranckG](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/franckg/32/38026_2.png) [@FranckG](https://forum.wixstudio.com/u/FranckG)\
**Post date:** [January 21, 2025, 2:32pm UTC](https://forum.wixstudio.com/t/filter-using-multiple-filter-dropdowns/58013/13 "2025-01-21T14:32:15Z")

</div>

Hey! Did you find a solution ?

---

<div class="post-metadata">

**Author:** ![user4759](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/user4759/32/103847_2.png) [@user4759](https://forum.wixstudio.com/u/user4759)\
**Post date:** [January 23, 2025, 11:06am UTC](https://forum.wixstudio.com/t/filter-using-multiple-filter-dropdowns/58013/14 "2025-01-23T11:06:52Z")

</div>

Thank you so much @Dan_Suhr