Enable dropdown menu using Radioitems

[vedantsane]

Hello Guys!

Can anyone show me with an example how to enable dropdown menu using Radioitems?

For ex. If I have 3 Radioitems and corresponding 3 dropdown menus,
suppose if I click on Radioitem 2, dropdown connected to Radioitem 2 should be enabled and other 2 should be
disabled.

Thanks!

[trinityimma]

Hello @vedantsane and welcome!

You can do that using this:

app.layout = html.Div(
    [
        dbc.Label("Choose one"),
        dbc.RadioItems(
            options=[
                {"label": "Option 1", "value": 1},
                {"label": "Option 2", "value": 2},
                {"label": "Disabled Option", "value": 3},
            ],
            value=1,
            id="radioitems-input",
        ),
        dcc.Dropdown(['NYC', 'MTL', 'SF'], 'NYC', id='1-dpdn'),
        dcc.Dropdown(['NYC2', 'MTL2', 'SF2'], 'NYC2', id='2-dpdn'),
        dcc.Dropdown(['NYC3', 'MTL3', 'SF3'], 'NYC3', id='3-dpdn'),
    ]
)


@app.callback(
    [
        Output('1-dpdn', 'disabled'),
        Output('2-dpdn', 'disabled'),
        Output('3-dpdn', 'disabled'),
    ],
    [
        Input("radioitems-input", "value")
    ],
)
def update_sidebar(unit):
    if unit == 1:
        return False, True, True
    elif unit == 2:
        return True, False, True
    elif unit == 3:
        return True, True, True```

Alternatively you can hide the dropdown

@app.callback(
    [
        Output('1-dpdn', 'style'),
        Output('2-dpdn', 'style'),
        Output('3-dpdn', 'style'),
    ],
    [
        Input("radioitems-input", "value")
    ],
)
def update_sidebar(unit):
    if unit == 1:
        return {'display': 'block'}, {'display': 'none'}, {'display': 'none'}
    elif unit == 2:
        return {'display': 'none'}, {'display': 'block'}, {'display': 'none'}
    elif unit == 3:
        return {'display': 'none'}, {'display': 'none'}, {'display': 'block'}

[vedantsane]

@trinityimma

@app.callback(
    [
        Output('1-dpdn', 'style'),
        Output('2-dpdn', 'style'),
        Output('3-dpdn', 'style'),
    ],
    [
        Input("radioitems-input", "value")
    ],
)
def update_sidebar(unit):
    if unit == 1:
        return {'display': 'block'}, {'display': 'none'}, {'display': 'none'}
    elif unit == 2:
        return {'display': 'none'}, {'display': 'block'}, {'display': 'none'}
    elif unit == 3:
        return {'display': 'none'}, {'display': 'none'}, {'display': 'block'}

Hi,

Thanks for your solution but I am getting the following error!

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
from dash.dependencies import Input, Output, State
import plotly.express as px
import numpy as np

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

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

app.layout = html.Div(
[
dbc.Label(“Choose one”),
dbc.RadioItems(
options=[
{“label”: “Option 1”, “value”: 1},
{“label”: “Option 2”, “value”: 2},
{“label”: “Disabled Option”, “value”: 3},
],
value=1,
id=“radioitems-input”,
),
dcc.Dropdown([‘NYC’, ‘MTL’, ‘SF’], ‘NYC’, id=‘1-dpdn’),
dcc.Dropdown([‘NYC2’, ‘MTL2’, ‘SF2’], ‘NYC2’, id=‘2-dpdn’),
dcc.Dropdown([‘NYC3’, ‘MTL3’, ‘SF3’], ‘NYC3’, id=‘3-dpdn’),
]
)
@app.callback(
[
Output(‘1-dpdn’, ‘style’),
Output(‘2-dpdn’, ‘style’),
Output(‘3-dpdn’, ‘style’),
],
[
Input(“radioitems-input”, “value”)
],
)
def update_sidebar(unit):
if unit == 1:
return {‘display’: ‘block’}, {‘display’: ‘none’}, {‘display’: ‘none’}
elif unit == 2:
return {‘display’: ‘none’}, {‘display’: ‘block’}, {‘display’: ‘none’}
elif unit == 3:
return {‘display’: ‘none’}, {‘display’: ‘none’}, {‘display’: ‘block’}

if name == ‘main’:
app.run_server(debug=True, port=8070)

[trinityimma]

Try using the code as it is below:

Don’t add anything, just copy and paste into a new python file.

from dash import dash, dcc, html, Output, Input
import dash_bootstrap_components as dbc


app = dash.Dash(__name__, title='Demo')

app.layout = html.Div(
    [
        dbc.Label("Choose one"),
        dbc.RadioItems(
            options=[
                {"label": "Option 1", "value": 1},
                {"label": "Option 2", "value": 2},
                {"label": "Disabled Option", "value": 3},
            ],
            value=1,
            id="radioitems-input",
        ),
        dcc.Dropdown(['NYC', 'MTL', 'SF'], 'NYC', id='1-dpdn'),
        dcc.Dropdown(['NYC2', 'MTL2', 'SF2'], 'NYC2', id='2-dpdn'),
        dcc.Dropdown(['NYC3', 'MTL3', 'SF3'], 'NYC3', id='3-dpdn'),
    ]
)


@app.callback(
    [
        Output('1-dpdn', 'style'),
        Output('2-dpdn', 'style'),
        Output('3-dpdn', 'style'),
    ],
    [
        Input("radioitems-input", "value")
    ],
)
def update_sidebar(unit):
    if unit == 1:
        return {'display': 'block'}, {'display': 'none'}, {'display': 'none'}
    elif unit == 2:
        return {'display': 'none'}, {'display': 'block'}, {'display': 'none'}
    elif unit == 3:
        return {'display': 'none'}, {'display': 'none'}, {'display': 'block'}


if __name__ == '__main__':
    app.run_server(debug=True, port=2020)

When it is running on its own, you can try integrate it into your code.

[vedantsane]

@trinityimma

from dash import dash, dcc, html, Output, Input
import dash_bootstrap_components as dbc


app = dash.Dash(__name__, title='Demo')

app.layout = html.Div(
    [
        dbc.Label("Choose one"),
        dbc.RadioItems(
            options=[
                {"label": "Option 1", "value": 1},
                {"label": "Option 2", "value": 2},
                {"label": "Disabled Option", "value": 3},
            ],
            value=1,
            id="radioitems-input",
        ),
        dcc.Dropdown(['NYC', 'MTL', 'SF'], 'NYC', id='1-dpdn'),
        dcc.Dropdown(['NYC2', 'MTL2', 'SF2'], 'NYC2', id='2-dpdn'),
        dcc.Dropdown(['NYC3', 'MTL3', 'SF3'], 'NYC3', id='3-dpdn'),
    ]
)


@app.callback(
    [
        Output('1-dpdn', 'style'),
        Output('2-dpdn', 'style'),
        Output('3-dpdn', 'style'),
    ],
    [
        Input("radioitems-input", "value")
    ],
)
def update_sidebar(unit):
    if unit == 1:
        return {'display': 'block'}, {'display': 'none'}, {'display': 'none'}
    elif unit == 2:
        return {'display': 'none'}, {'display': 'block'}, {'display': 'none'}
    elif unit == 3:
        return {'display': 'none'}, {'display': 'none'}, {'display': 'block'}


if __name__ == '__main__':
    app.run_server(debug=True, port=2020)

Hello,
I copied the same code but still it is not functioning.

May be there are still some bugs…

[trinityimma]

@vedantsane It is working on my system. Make sure you are using the latest version of Dash.
Your version of Dash might be seeing the ids as multiple, so try to name them maybe 'a', 'b','c' or use underscore.

But I believe installing up to date version of Dash will be better solution. If you are using a virtual environment, also try to update it.

[AIMPED]

Try changing from:

dcc.Dropdown(['NYC', 'MTL', 'SF'], 'NYC', id='1-dpdn'),

to

dcc.Dropdown(id='1-dpdn', options=['NYC', 'MTL', 'SF'], value='NYC'),

[vedantsane]

Hi Thanks, It is working now after providing the ids in this order.

Still, there are some errors as shown below:

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
from dash.dependencies import Input, Output, State
import plotly.express as px
import numpy as np

app = dash.Dash(name, title=‘Demo’)

app.layout = html.Div(
[
dbc.Label(“Choose one”),
dbc.RadioItems(id=“radioitems-input”,
options=[
{“label”: “Option 1”, “value”: 1},
{“label”: “Option 2”, “value”: 2},
{“label”: “Disabled Option”, “value”: 3},
],
value=1,
),
dcc.Dropdown(id=‘1-dpdn’, options=[‘NYC’, ‘MTL’, ‘SF’], value=‘NYC’),
dcc.Dropdown(id=‘2-dpdn’, options=[‘NYC2’, ‘MTL2’, ‘SF2’], value=‘NYC2’),
dcc.Dropdown(id=‘3-dpdn’, options=[‘NYC3’, ‘MTL3’, ‘SF3’], value=‘NYC3’),
]
)

@app.callback(
[
Output(‘1-dpdn’, ‘options’),
Output(‘2-dpdn’, ‘options’),
Output(‘3-dpdn’, ‘options’),
],
[
Input(“radioitems-input”, “value”)
],
)
def update_sidebar(unit):
if unit == 1:
return {‘display’: ‘block’}, {‘display’: ‘none’}, {‘display’: ‘none’}
elif unit == 2:
return {‘display’: ‘none’}, {‘display’: ‘block’}, {‘display’: ‘none’}
elif unit == 3:
return {‘display’: ‘none’}, {‘display’: ‘none’}, {‘display’: ‘block’}

if name == ‘main’:
app.run_server(debug=True, port=7500)

[AIMPED]

Hi @vedantsane ,

could you please format your code when posing it here? Have a read here:

How to provide your sample code in right format

Hello Community, we found a lot of new posts with sample code are rendered in a pretty bad format: incorrect indent and punctuations in a different encoding, etc. there is no secret but a simple markdown trick your code should be included between two ```, the first one followed by language like python , without the ending comment #part ```python print("Hello Markdown") ``` # show the escaped ending

You are returning three dictionaries and want them to be the options of your dropdowns? If so, have a read here concerning the options property:

Dropdown | Dash for Python Documentation | Plotly