The dropdown value auto change base on first filter

Dash Python
1

Hi,
I want to develop one page for monitoring process status.
The csv file had processes and codes as below sample.

image
image740×422 24.9 KB

And I used pandas df[‘Process’] .unique() and df[‘CODE’].unique() for dropdown filter.
How the code filter auto changed base on ‘Process’ value?
For example, when I choose Process=B, the CODE only show CODE3&CODE4?

image
image2116×238 54 KB

2

Hi @Eddy ,

Basically you want the options of a dcc.Dropdown to be populated based on the selection of an other dcc.Dropdown. Since you are using pandas anyways, you could do something like this:

from dash import Dash, Input, Output, html, dcc
import dash_bootstrap_components as dbc
import pandas as pd

df = pd.DataFrame(
    {
        'process': ['A', 'A', 'B', 'B', 'C', 'C'],
        'code': [f'CODE{i}' for i in range(1, 7)],
        'data': [1 for _ in range(6)]
    }
)

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.H4('Process'),
                        dcc.Dropdown(
                            id='drop_1',
                            options=df.process.unique()
                        ),
                    ]
                ),
                dbc.Col(
                    [
                        html.H4('Code'),
                        dcc.Dropdown(
                            id='drop_2',
                        ),
                    ]
                )
            ]
        )
    ]
)


@app.callback(
    Output('drop_2', 'options'),
    Input('drop_1', 'value'),
    prevent_initial_call=True
)
def update_output(value):
    return df[df.process == value].code


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

Hi, AIMPED
Thank you very much for the solution.

1 Like