How to connect HTML elements with Dash Callback in Python

Question

I'm using both html elements and dash bootstrap components in my code and wonder if I can connect an HTML component with a Dash component in callback. For example, I have a dash dropdown menu and want to update the html text based on the input of the dropdown menu.

#dropdown
html.Div =(
        [
    dcc.Dropdown(
      id="dropdown",
      options=[
               {"label": "option1", "value": "option1"},
               {"label": "option2", "value": "option2"},
       ],
      multi=True,
    )
  ]
)

# HTML Components

html.Div =(
           [
     html.H2("The selected option is")
     html.P(id="text-holder", children =["text"])
 ]
)


@app.callback(
  Output("text-holder", "children"),
  Input("dropdown", "value)
)
def fill_text(value):
   return value

Once a user selects a value from the dropdown menu, I want the selected value to appear on the text line created by html.P. For example, if "option1" is selected from the dropdown menu, the text that appears on the HTML part should be also "option1".

If I run the current script, I don't get any error message but the html part doesn't get updated at all. I think the callback is incorrect but am not sure how to fix it.

score 0 · Answer 1 · answered Mar 31 '22 at 09:43

Using html.Div =( ... alters the value of html.Div. And it's really important to get the layout right.

Perhaps this is what you're looking for:

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

app = Dash(__name__)
app.layout = html.Div(
    [
        # dropdown
        html.Div(
            [
                dcc.Dropdown(
                    id="dropdown",
                    options=[
                        {"label": f"option{idx}", "value": f"option{idx}"}
                        for idx in range(1, 5)
                    ],
                    multi=True,
                    value="not specified",
                )
            ]
        ),
        # HTML Components
        html.Div([html.H2("The selected option is"), html.P(id="text-holder")]),
    ]
)


@app.callback(Output("text-holder", "children"), Input("dropdown", "value"))
def fill_text(value):
    return value


if __name__ == "__main__":
    app.run_server()

How to connect HTML elements with Dash Callback in Python

1 Answers1