# Filter out selected options from multiple dropdowns

**URL:** <https://community.plotly.com/t/filter-out-selected-options-from-multiple-dropdowns/53577>\
**Category:** Dash Python\
**Created:** [June 5, 2021, 6:05am UTC](https://community.plotly.com/t/filter-out-selected-options-from-multiple-dropdowns/53577 "2021-06-05T06:05:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![atharvakatre](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/atharvakatre/32/14713_2.png) [@atharvakatre](https://community.plotly.com/u/atharvakatre)\
**Post date:** [June 5, 2021, 6:05am UTC](https://community.plotly.com/t/filter-out-selected-options-from-multiple-dropdowns/53577/1 "2021-06-05T06:05:53Z")

</div>

Imagine three dropdowns with the same option list.  
What I want is if the user selects a value from the first dropdown it should remove that particular value from the other 2 dropdowns. So basically the user can’t select the value that was already selected from the first dropdown.

I tried different workarounds but couldn’t do it.

```auto
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash( __name__ )

options = ['Anime', 'Manga', 'Video Games', 'Music']

def get_dropdown(id):
    dropdown = dcc.Dropdown(
        id=id,
        options=[{'label': i, 'value': i} for i in options],
    )
    return dropdown

app.layout = html.Div([
    html.Div(get_dropdown('dropdown1'), style={'width':'20%'}),
    html.Br(),
    html.Div(get_dropdown('dropdown2'), style={'width':'20%'}),
    html.Br(),
    html.Div(get_dropdown('dropdown3'), style={'width':'20%'}),
])

@app.callback(
    Output('dropdown1', 'options'),
    Output('dropdown2', 'options'),
    Output('dropdown3', 'options'),
    Input('dropdown1', 'value'),
    Input('dropdown2', 'value'),
    Input('dropdown3', 'value'),
)
def update_options(v1, v2, v3):
    #logic   

if __name__ == " __main__":
    app.run_server(debug=True)

```

---

<div class="post-metadata">

**Author:** ![atharvakatre](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/atharvakatre/32/14713_2.png) [@atharvakatre](https://community.plotly.com/u/atharvakatre)\
**Post date:** [June 5, 2021, 7:42am UTC](https://community.plotly.com/t/filter-out-selected-options-from-multiple-dropdowns/53577/2 "2021-06-05T07:42:32Z")

</div>

Okay I figured it out 🥴 not the most efficient solution but posting it for future reference.

```auto
def update_options(v1, v2, v3):
    option1 = ['Anime', 'Manga', 'Video Games', 'Music']
    selected = []
    if v2 is not None:
        selected.append(v2)
    if v3 is not None:
        selected.append(v3)
    for i in selected:
        option1.remove(i)

    option2 = ['Anime', 'Manga', 'Video Games', 'Music']
    selected = []
    if v1 is not None:
        selected.append(v1)
    if v3 is not None:
        selected.append(v3)
    for i in selected:
        option2.remove(i)

    option3 = ['Anime', 'Manga', 'Video Games', 'Music']
    selected = []
    if v1 is not None:
        selected.append(v1)
    if v2 is not None:
        selected.append(v2)
    for i in selected:
        option3.remove(i)

    return [{'label': i, 'value': i} for i in option1], [{'label': i, 'value': i} for i in option2], [{'label': i, 'value': i} for i in option3], [{'label': i, 'value': i} for i in option4]

```

---

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [June 5, 2021, 2:01pm UTC](https://community.plotly.com/t/filter-out-selected-options-from-multiple-dropdowns/53577/3 "2021-06-05T14:01:18Z")

</div>

Hi @atharvakatre

I think you can use the 3 dropdown **‘options’** as **‘State’** , then use the variable that has the options received and delete the element that match the **value** received and provide the new options to the dropdowns.

---

<div class="post-metadata">

**Author:** ![atharvakatre](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/atharvakatre/32/14713_2.png) [@atharvakatre](https://community.plotly.com/u/atharvakatre)\
**Post date:** [June 5, 2021, 2:33pm UTC](https://community.plotly.com/t/filter-out-selected-options-from-multiple-dropdowns/53577/4 "2021-06-05T14:33:55Z")

</div>

Ok it seems this can be a possible solution, I’ll try it out. Thank you!