How to write a button callback function for bootstrap DropdownMenuItem?

Dash Python
1

I have written the following code:


    import dash_bootstrap_components as dbc
    from dash import Dash, html, dcc, callback, Output, Input, State

    tickers = ['MSFT', 'ADB', 'ABBV', 'A', 'TXN', 'MCHP']

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

    dropdown_menu = dbc.DropdownMenu(
        id='companies_id',
        label='Tickers',
        children=[dbc.DropdownMenuItem(ticker, id=ticker) for ticker in tickers]
    )

    button = dbc.Button('Generate', id='button_id', className='me-2', n_clicks=0)

    div_output = html.Div(id="divout_id")

    layout_div = html.Div([
        dropdown_menu,
        button,
        div_output
    ])

    @app.callback(
        Output('divout_id', 'children'),
        Input('button_id', 'n_clicks'),
        State('ticker', 'input1')
   )
    def return_data(n_clicks, input1):
        if(n_clicks):
            return f"Selected {input1}"
        else:
            return f""

    app.layout = dbc.Container(layout_div)

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

I understand that in order to ouptut the value of the DropdownMenu I must get the DropdownMenuItem ID.
When I select a value from the Dropdown Menu and press the Generate button, how can I output the value of the DropdownMenu selected item into the empty DIV?

2

You don’t have this id in your layout, but these ones:

The dbc.Dropdownmenuitem does not have a property called input1.

Your code should actually throw an error.

2 Likes
3

Hi @mahmoud899

In addition the code errors mentioned by @AIMPED , I think dbc.DropdownMenue is not the appropriate component for your use case. This component is used mainly for navigation rather than input, which is what you’re trying to do here. The dcc.Dropdown is the more appropriate component here. I modified your code to use the dcc.Dropdown and it now works as you’re expecting it to.

import dash_bootstrap_components as dbc
from dash import Dash, html, dcc, callback, Output, Input, State

tickers = ['MSFT', 'ADB', 'ABBV', 'A', 'TXN', 'MCHP']

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

dropdown_menu = dcc.Dropdown(
    id='companies_id',
    options= tickers
)

button = dbc.Button('Generate', id='button_id', className='me-2', n_clicks=0)

div_output = html.Div(id="divout_id")

layout_div = html.Div([
    dropdown_menu,
    button,
    div_output
])
app.layout = dbc.Container(layout_div)

@app.callback(
    Output('divout_id', 'children'),
    Input('button_id', 'n_clicks'),
    State('companies_id', 'value')
)
def return_data(n_clicks, input1):
    if(n_clicks):
        return f"Selected {input1}"
    else:
        return f""


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

This is true, it does throw an error. This is why I am asking how to get [‘MSFT’, ‘ADB’, ‘ABBV’, ‘A’, ‘TXN’, ‘MCHP’] the id when you select it from the DropdownMenu.

5

I did it with dcc.Dropdown, but I wanted to see if it is possible to get it done with DropdownMenu. But now I got your point its more for navigation not for selecting objects.

2 Likes
6

You can use the dbc drop-down, but instead of “value” you need to use the property “n_klicks”.