Synchronizing Dropdown and Checklist component

Dash Python
1

I have a Dropdown and a Checklist component. I would like the Checklist to hold specific values for each specific dropdown value. Is that possible?
I tried to create a dictionary that would hold the checklist values for the specific dropdown value but I couldn’t get it to work. Is there an easier way or even any way to do this?

2

Hi @Wooden_Kludge and welcome to the Dash community :slightly_smiling_face:

Yes, this is possible, see the example called “Dash App With Chained Callbacks” on this page

3

Just to clarify unfortunately when I look at the chained callbacks example I don’t see how I would make what I want work. I don’t want to update the available options I want to hold a value even when switching back and forth between the first inputs. The example may show that and I may just not understand how to code that.
In my case I would like say to have the America value hold the value of San Francisco even after switching to Canada. Currently it reverts back to the NY value and does not hold the value of SF.

4

Hi @Wooden_Kludge

You can keep the user selected option in dcc.Store()

Here is the example from the docs updated so it holds the previous selected city when the country changes. It may not be what you are looking for since it updates the options as well.

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

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

all_options = {
    "America": ["New York City", "San Francisco", "Cincinnati"],
    "Canada": [u"Montréal", "Toronto", "Ottawa"],
}

app.layout = html.Div(
    [
        dcc.RadioItems(
            id="countries-radio",
            options=[{"label": k, "value": k} for k in all_options.keys()],
            value="America",
        ),
        html.Hr(),
        dcc.RadioItems(
            id="cities-radio",
            options=[{"label": i, "value": i} for i in all_options["America"]],
            value="New York City",
        ),
        html.Hr(),
        html.Div(id="display-selected-values"),
        dcc.Store(
            id="store-selection", data={"America": "New York City", "Canada": u"Montréal"}
        ),
    ]
)


@app.callback(
    Output("cities-radio", "value"),
    Output("cities-radio", "options"),
    Input("countries-radio", "value"),
    State("store-selection", "data"),
)
def set_cities_options(selected_country, store):
    return (
        store[selected_country],
        [{"label": i, "value": i} for i in all_options[selected_country]]
    )


@app.callback(
    Output("store-selection", "data"),
    Input("countries-radio", "value"),
    Input("cities-radio", "value"),
    State("store-selection", "data"),
)
def set_cities_value(selected_country, selected_city, store):
    store[selected_country] = selected_city
    return store


@app.callback(
    Output("display-selected-values", "children"),
    Input("countries-radio", "value"),
    Input("cities-radio", "value"),
)
def set_display_children(selected_country, selected_city):
    return u"{} is a city in {}".format(selected_city, selected_country)


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

This works well enough for me to parse out the information I need myself. Thanks for the help with the dcc.Store. :+1:

1 Like