时间戳

首页 > 解决方案 > python - 如何根据python dash中另一个下拉列表的用户多值创建动态下拉列表？

python - python - 如何根据python dash中另一个下拉列表的用户多值创建动态下拉列表？

问题描述

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

示例：如果我选择城市，城市的下拉菜单应该出现，当我取消选择城市时，城市的下拉菜单应该消失

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

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)

标签： pythondrop-down-menuplotly-dash

解决方案

以下是您的问题的解决方案，如何根据另一个下拉菜单动态显示和隐藏下拉菜单。该代码要求您从显示或隐藏目标 html Div 元素的回调函数中输出样式值。这可以使用许多不同的值来完成，以从同一源下拉列表中取消隐藏 html Div 元素（在您的代码中，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)

推荐阅读