如何在python dash中基于另一个下拉列表的用户多值创建动态下拉列表

Question

我正在尝试创建动态下拉列表，它应该根据我的选择出现和消失

示例：如果我选择城市，则应该显示城市的下拉列表，当我取消选择城市时，下拉列表城市应该消失

我可以动态创建下拉列表，但如果尝试取消选择，只需创建一个新的下拉列表，而不是消失。任何帮助都会有帮助。谢谢

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, MATCH, ALL
app = dash.Dash(__name__, suppress_callback_exceptions=True)
app.layout = html.Div([
html.Div('My first dropdown'),
dcc.Dropdown(
id="dropdown1",
options=[{'label': i, 'value': i} for i in ['city', 'country', 'continent']],
value=["city"],
multi=True,
),
html.Div(id='dynamic-dropdown-container', children=[]),
])
@app.callback(
Output('dynamic-dropdown-container', 'children'),
Input('dropdown1', 'value'),
State('dynamic-dropdown-container', 'children'))
def display_dropdowns(value, children):
lengthofval=len(value)
new_element = html.Div([
html.Div(
id="title"
),
dcc.Dropdown(
id={
'type': 'dynamic-dropdown',
'index': lengthofval
},
options=[]
),
])
children.append(new_element)
return children

@app.callback(
Output("title","children"),
Input("dropdown1","value")
)
def display_output(value):
return html.Div('selected option {}'.format( value[-1]))

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

Answer 1

以下是您的问题的解决方案，即如何根据另一个下拉列表动态显示和隐藏下拉列表。该代码要求您从显示或隐藏目标htmlDiv元素的回调函数中输出一个样式值。这可以使用许多不同的值来取消隐藏同一源下拉列表中的htmlDiv元素(在您的代码中，dropdown1是源下拉列表(。

我已经包含了完整的工作代码，我想如果你复习一下，你就会明白它是如何连接在一起的。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(__name__, suppress_callback_exceptions=True)
app.layout = html.Div([
html.Div('My first dropdown'),
dcc.Dropdown(
id="dropdown1",
options=[{'label': i, 'value': i} for i in ['city', 'country', 'continent']],
value="",
multi=False,
),
html.Div(
[
html.Div([
dcc.Dropdown(
id='dynamic-dropdown-container1',
options=[{'label': i, 'value': i} for i in ['NYC', 'SFO', 'DFW']],
value='',
)],
style={
'display':'block'
}   
),
html.Div([
dcc.Dropdown(
id='dynamic-dropdown-container2',
options=[{'label': i, 'value': i} for i in ['USA', 'Italy', 'Japan']],
value='',
)],
style={
'display':'block'
}    
)
],
),
])
@app.callback(
Output(
component_id='dynamic-dropdown-container1',
component_property='style'
),
[Input(
component_id='dropdown1',
component_property='value'
)]
)
def update_requested_city(map_option):
if map_option == 'city':
return {'display': 'block'}
else:
return {'display': 'none'}
@app.callback(
Output(
component_id='dynamic-dropdown-container2',
component_property='style'
),
[Input(
component_id='dropdown1',
component_property='value'
)]
)
def update_requested_country(map_option):
if map_option == 'country':
return {'display': 'block'}
else:
return {'display': 'none'}

@app.callback(
Output("title","children"),
Input("dropdown1","value")
)
def display_output(value):
return html.Div('selected option {}'.format( value[-1]))

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