How to determine whether option is selected or unselected in multiselect dropdown

Dash Python
1 

from dash import Dash, dcc, html, Input, Output,callback,State
import dash

app = Dash(__name__)
app.layout = html.Div([
    dcc.Dropdown([{"label":"A","value":1},{"label":"B","value":2},{"label":"C","value":3},{"label":"D","value":4}], [1], id='demo-dropdown',multi=True),
    html.Div(id='dd-output-container')
])


@callback(
    Output('dd-output-container', 'children'),
    Input('demo-dropdown', 'value'),
    State('demo-dropdown', 'options')
    
)
def update_output(value,options):
    return f'You have selected {value}'


if __name__ == '__main__':
    app.run(debug=True)

Above example creates a multiselect dropdown. How can I know where the event is select or unselect in the dropdown

2

the dropdown value is a list, so you could safe the elements and check whether one has been added or removed

from dash import Dash, dcc, html, Input, Output,callback,State
import json

app = Dash(__name__)
app.layout = html.Div([
    dcc.Dropdown([{"label":"A","value":1},{"label":"B","value":2},{"label":"C","value":3},{"label":"D","value":4}], [1], id='demo-dropdown',multi=True),
    html.Div(id='dd-output-container'),
    dcc.Store(id = 'dropdown-store', data = json.dumps([1]))
])

@callback(
    Output('dropdown-store', 'data'),
    Output('dd-output-container', 'children'),
    Input('demo-dropdown', 'value'),
    State('demo-dropdown', 'options'),
    State('dropdown-store', 'data')
)
def update_output(value,options, store):
    prev_value = json.loads(store)
    if len(prev_value)>len(value):
        removed_element = set(prev_value) - set(value)
        return json.dumps(value), f"An element has been removed: {removed_element}"
    elif len(prev_value) < len(value):
        added_element = set(value) - set(prev_value)
        return json.dumps(value), f"An element has been added: {added_element}"
    else:
        # No changes detected
        return json.dumps(value), "No changes detected." f'You have selected {value}'


if __name__ == '__main__':
    app.run(debug=True)
1 Like
3

Thanks @Louis It works.

1 Like