Filter out selected options from multiple dropdowns

Dash Python
1

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.

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)
2

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

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]
3

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.

4

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

1 Like