# Dependent Dropdown in Pattern-Matching Example **URL:** \ **Category:** Dash Python\ **Tags:** question\ **Created:** [April 12, 2024, 7:21pm UTC](https://community.plotly.com/t/dependent-dropdown-in-pattern-matching-example/83748 "2024-04-12T19:21:48Z")\ **Posts on this page:** 3\ **Page:** 1
**Author:** ![ragarre](https://avatars.discourse-cdn.com/v4/letter/r/ed8c4c/32.png) [@ragarre](https://community.plotly.com/u/ragarre)\ **Post date:** [April 12, 2024, 7:21pm UTC](https://community.plotly.com/t/dependent-dropdown-in-pattern-matching-example/83748/1 "2024-04-12T19:21:48Z")
I am learning to use pattern-matching in my own dashboard by working with this example. In the example, how would I add an extra dropdown, such that the values of the dropdown with id=“pattern-match-country” depend on what is returned by the new dropdown? > **[Pattern-match](https://dash-example-index.herokuapp.com/pattern-match)** > > This app demonstrates pattern matching callbacks which dynamically adds or deletes components. It has a top-bottom layout and a pattern matching callback. I know that a new callback is required to provide the dropdown contents based on the values of the first dropdown, such as in this example: > [@Updating a dropdown menu's contents dynamically](https://community.plotly.com/t/updating-a-dropdown-menus-contents-dynamically/4920): > > It seems that dropdown menus are used exclusively as inputs to other dash objects. Or at least this is the case in the examples. In the interactive section of the “getting started” guide, you get to select a country from the dropdown menu, and then the graph updates based on the country you’ve selected. What if I want to update another dropdown menu? Would I use a callback to update the ‘options’ property of the child-dropdown? This doesn’t seem to work. Below is some code to see this. There ar… However, I can’t seem to modify the callback with add\_card in the pattern-matching example so that it takes a new Input from the new callback appropriately. My guess is to use MATCH to properly receive the values to display in the dropdown. Hopefully all this makes sense. Thanks! ---
**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\ **Post date:** [April 21, 2024, 9:12pm UTC](https://community.plotly.com/t/dependent-dropdown-in-pattern-matching-example/83748/2 "2024-04-21T21:12:29Z")
Hey @ragarre, I’m not sure if I understand your question. I think, you want to change the options of the dropdowns in the dynamically created components, right? here an example of how to do this. It’s basically the example form the dash-example-index with a few lines of added code (which I marked clearly 😉 ) ```python from dash import Dash, dcc, html, Input, Output, State, MATCH import plotly.express as px import dash_bootstrap_components as dbc from dash.exceptions import PreventUpdate df = px.data.gapminder() default_column_x = "year" default_column_y = "gdpPercap" options = ["lifeExp", "year", "pop", "gdpPercap"] app = Dash( __name__ , external_stylesheets=[dbc.themes.BOOTSTRAP]) app.layout = dbc.Container( dbc.Row( dbc.Col( [ html.H3("Pattern Matching Callbacks Demo"), dbc.InputGroup( [ dcc.Dropdown( options=df.country.unique(), value="Canada", id="pattern-match-country", clearable=False, style={"width": 300}, ), dbc.Button( "Add Chart", id="pattern-match-add-chart", n_clicks=0 ), ], className="mb-3", ), html.Div(id="pattern-match-container", children=[], className="mt-4"), ] ) ), fluid=True, ) def create_figure(column_x, column_y, country): chart_type = px.line if column_x == "year" else px.scatter return ( chart_type( df.query("country == '{}'".format(country)), x=column_x, y=column_y, ) .update_layout( title="{} {} vs {}".format(country, column_x, column_y), margin_l=10, margin_r=0, margin_b=30, ) .update_xaxes(title_text="") .update_yaxes(title_text="") ) def make_card(n_clicks, country): return dbc.Card( [ dbc.CardHeader( [ f"Figure {n_clicks + 1} ", dbc.Button( "X", id={"type": "dynamic-delete", "index": n_clicks}, n_clicks=0, color="secondary", ), # ---------------------------------------------------------------------------ADDED dcc.Dropdown( id={"type": "dynamic-dropdown-added", "index": n_clicks}, options=[1, 2, 3, 4] ) # ---------------------------------------------------------------------------ADDED ], className="text-end", ), dcc.Graph( id={"type": "dynamic-output", "index": n_clicks}, style={"height": 300}, figure=create_figure(default_column_x, default_column_y, country), ), dcc.Dropdown( id={"type": "dynamic-dropdown-x", "index": n_clicks}, options=options, value=default_column_x, clearable=False, ), dcc.Dropdown( id={"type": "dynamic-dropdown-y", "index": n_clicks}, options=options, value=default_column_y, clearable=False, ), ], style={ "width": 400, "display": "inline-block", }, className="m-1", id={"type": "dynamic-card", "index": n_clicks}, ) @app.callback( Output("pattern-match-container", "children"), Input("pattern-match-add-chart", "n_clicks"), State("pattern-match-container", "children"), State("pattern-match-country", "value"), ) def add_card(n_clicks, cards, country): new_card = make_card(n_clicks, country) cards.append(new_card) return cards @app.callback( Output({"type": "dynamic-card", "index": MATCH}, "style"), Input({"type": "dynamic-delete", "index": MATCH}, "n_clicks"), prevent_initial_call=True, ) def remove_card(_): return {"display": "none"} @app.callback( Output({"type": "dynamic-output", "index": MATCH}, "figure"), Input({"type": "dynamic-dropdown-x", "index": MATCH}, "value"), Input({"type": "dynamic-dropdown-y", "index": MATCH}, "value"), Input("pattern-match-country", "value"), ) def update_figure(column_x, column_y, country): return create_figure(column_x, column_y, country) # ---------------------------------------------------------------------------ADDED @app.callback( Output({"type": "dynamic-dropdown-x", "index": MATCH}, "options"), Output({"type": "dynamic-dropdown-y", "index": MATCH}, "options"), Input({"type": "dynamic-dropdown-added", "index": MATCH}, "value"), prevent_initial_call=True ) def limit_options(num): if not num: return options, options return [options[:num], options[:num]] # ---------------------------------------------------------------------------ADDED if __name__ == " __main__": app.run_server(debug=True) ``` ---
**Author:** ![ragarre](https://avatars.discourse-cdn.com/v4/letter/r/ed8c4c/32.png) [@ragarre](https://community.plotly.com/u/ragarre)\ **Post date:** [April 22, 2024, 7:48pm UTC](https://community.plotly.com/t/dependent-dropdown-in-pattern-matching-example/83748/3 "2024-04-22T19:48:55Z")
This was very helpful; thank you!