How the second dropdown list can automatically show value based on the first dropdown list? Only one value is available for the second dropdown list based on the selection in first dropdown list.
Sample data:
data = {'Product ID': {0: 'P1', 1: 'P2', 2: 'P3', 3: 'P4', 4: 'P5', 5: 'P1', 6: 'P2', 7: 'P3', 8: 'P4', 9: 'P5'}, 'Sale ID': {0: 'Sale 001', 1: 'Sale 002', 2: 'Sale 003', 3: 'Sale 004', 4: 'Sale 005', 5: 'Sale 006', 6: 'Sale 007', 7: 'Sale 008', 8: 'Sale 009', 9: 'Sale 010'}, 'Amount': {0: 100.0, 1: 101.0, 2: 102.0, 3: 103.0, 4: 104.0, 5: 100.0, 6: 101.0, 7: 102.0, 8: 103.0, 9: 104.0}, 'Date': {0: '01/10/2022', 1: '02/10/2022', 2: '03/10/2022', 3: '04/10/2022', 4: '05/10/2022', 5: '06/10/2022', 6: '07/10/2022', 7: '08/10/2022', 8: '09/10/2022', 9: '10/10/2022'}, 'Customer ID': {0: 'Cus01', 1: 'Cus02', 2: 'Cus03', 3: 'Cus04', 4: 'Cus05', 5: 'Cus01', 6: 'Cus02', 7: 'Cus03', 8: 'Cus04', 9: 'Cus05'}}
Code:
app.layout
app.layout = dbc.Container([
dbc.Row([
dbc.Col(html.H1("Tes",
className = 'text-center text-primary, mb-4 '
,style={"textDecoration":"underline",'font-weight': 'bold'}),
width=12
),
]),
html.Br(),
dbc.Row([
dbc.Col([
html.H3('Product'
,style={'font-size': '25px'}
),
], width=3, md=4),
dbc.Col([
dcc.Dropdown(id='product_dd', value= None, #df['year'].max(),
options = [{'label':x, 'value':x}
for x in product_cat],
searchable = True, search_value='',
placeholder= 'Please select ...',
clearable= True
),
], width=3, md=4),
]),
html.Br(),
dbc.Row([
dbc.Col([
html.H3('Date'
,style={'font-size': '25px'}
),
], width=3, md=4),
dbc.Col([
dcc.Dropdown(id='date_dd', value= '',
searchable = True, search_value='',
placeholder= 'Please select ...',
clearable=True
),
html.Br(),
], width=3, md=4),
], ), #style={"flexWrap": "wrap", "width":"250px"}
html.Br(),
dbc.Row([
dbc.Col([
html.H3('Sale ID'
,style={'font-size': '25px'}
),
], width=3, md=4),
dbc.Col([
dcc.Dropdown(id='saleid_dd', value='',
searchable = True, search_value='',
placeholder= 'Please select ...',
clearable=True
),
html.Br(),
], width=3, md=4),
]),
html.Br(),
dbc.Row([
dbc.Col([
html.H3('Customer ID'
,style={'font-size': '25px'}
),
], width=3, md=4),
dbc.Col([
dcc.Dropdown(id='customer_dd', value= '',
searchable = True, search_value='',
placeholder= 'Please select ...',
clearable= True
),
html.Br(),
], width=3, md=4),
]),
html.Br(),
])
@callback
@app.callback(
Output('date_dd','options'),
Input('product_dd', 'value')
)
def update_dd (product_dd):
date = df.drop_duplicates(['Date'], inplace= False)
relevant_date = date[ df['Product'] == product_dd]['Date'].values.tolist()
date_option= [dict(label=x,value=x)for x in relevant_date]
return date_option
#first dropdown
@app.callback(
Output('saleid_dd','options'),
Input('date_dd', 'value')
)
def update_dd (date_dd):
saleid= df.drop_duplicates(['Sale ID'], inplace= False)
relevant_id= saleid[ df['Date'] == date_dd]['Sale ID'].values.tolist()
saleid_option= [dict(label=x,value=x)for x in relevant_id]
return saleid_option
#second dropdown
@app.callback(
Output('customer_dd','options'),
Input('saleid_dd', 'value')
)
def update_dd (saleid_dd):
customer = df.drop_duplicates(['Customer ID'], inplace= False)
relevant_customer = customer[ df['Sale ID'] == saleid_dd]['Customer ID'].values.tolist()
cust_option= [dict(label=x,value=x)for x in relevant_customer]
return cust_option
@app.callback(
Output('customer_dd','value'),
Input('customer_dd', 'options')
)
def default_value(merchant):
return merchant[0]['value']