How to get all selected values of dynamically selected dropdown in a single list?

问题

How do I get all values of dynamically selected dropdown in a single list? I tried doing callback inside callback with for loop iteration, but unable to get the desired list.

The issue with def a_function where callback inside a callback is present.

How to get in a single list of multiple dropdowns which is dynamically updated?

import dash
import dash_core_components as dcc
import dash_html_components as html

step = html.Div(
        children=[
            "Menu:",
            dcc.Dropdown(options=[{'label': v, 'value': v} for v in ['option1', 'option2', 'option3']])
        ])

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__,external_stylesheets=external_stylesheets)
app.config['suppress_callback_exceptions']=True

div_list = [step]

app.layout = html.Div(
    children=[
        html.H1(children='Hello Dash'),
        html.Div(id='step_list', children=div_list),
        html.Div(id='local'),
        html.Button('Add Step', id='add_step_button', n_clicks_timestamp='0'),
        html.Button('Remove Step', id='remove_step_button', n_clicks_timestamp='0'),
        html.Div(id='tester_div'),
        html.Div(id='tester_div_2')])

@app.callback(
    [dash.dependencies.Output('step_list', 'children'),
    dash.dependencies.Output('local','value')],
    [dash.dependencies.Input('add_step_button', 'n_clicks_timestamp'),
    dash.dependencies.Input('add_step_button', 'n_clicks'),
     dash.dependencies.Input('remove_step_button', 'n_clicks_timestamp')],
    [dash.dependencies.State('step_list', 'children')])
def add_step(add_ts, clicks, remove_ts, div_list):
    add_ts = int(add_ts)
    remove_ts = int(remove_ts)
    if add_ts > 0 and add_ts > remove_ts and len(div_list) < 4:
        div_list += [html.Div(children=[
            "Menu:",
            dcc.Dropdown(id='dropdown_id_{}'.format(clicks), options=[{'label': v, 'value': v} for v in ['select1', 'select2', 'select3']])
        ])]
    if len(div_list) > 1 and remove_ts > add_ts:
        div_list = div_list[:-1]
    return div_list,len(div_list)


@app.callback(
    dash.dependencies.Output('tester_div', 'children'),
    [dash.dependencies.Input('local', 'value')])
def a_function(value):
    all_output = []
    if value:
        for i in range(1,value+1):
            @app.callback(dash.dependencies.Output('tester_div_2','children'),
                          [dash.dependencies.Input('dropdown_id_{}'.format(i), 'value')])
            def drop_output(valued):
                all_output.append(valued)
    return all_output

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

In this image, the output should be in a list like this: [option2, select1]

In this image, the output should be in a list like this: [option3, select3, select1, select2]

回答1:

Dash does not work with components whose IDs are not present at the initial build of the layout. Dynamically adding components like this can only work if those components are already present on the page when it first loads, probably as hidden components which you later reveal. Callbacks within callbacks, as far as I know, won't work for similar reasons, but you can create callbacks in a loop.

You'll need to rework the setup of your layout a bit, and maybe edit your post if you need more help.

来源：https://stackoverflow.com/questions/60604550/how-to-get-all-selected-values-of-dynamically-selected-dropdown-in-a-single-list