Блог

Я пытаюсь создать динамическое выпадающее меню, которое должно появляться и исчезать на основе моего выбора

Пример: если я выбираю город ,раскрывающееся меню должно отображаться для города, когда я отменяю выбор города, раскрывающееся меню для города должно исчезнуть

И я могу динамически создавать выпадающее меню, но если вы попытаетесь снять его, просто создайте новое выпадающее меню, а не исчезните. Любая помощь была бы полезна. Спасибо

 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)
 

Ниже приведено решение вашего вопроса о том, как динамически отображать и скрывать раскрывающийся список на основе другого раскрывающегося списка. Код требует, чтобы вы вывели значение стиля из функции обратного вызова, которая либо отображает, либо скрывает целевой элемент html Div. Это можно сделать со многими различными значениями, чтобы отобразить элементы html Div из одного раскрывающегося списка источника (в вашем коде раскрывающийся список 1 является раскрывающимся списком источника).

Я включил полный рабочий код, я думаю, что если вы просмотрите его, то поймете, как все это взаимосвязано.

 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)