[Solved] Dropdown Box multi select add additional from button

Dash Python
1

Hi

I’m using a Dropdown box with multiple set to true, call this the tickers_dropdown. This is feeding from a large number of “tickers”, which are made up of multiple parts.
I have implemented a number of other dropdown boxes to assist building these multiple part tickers and on a button click this passes the id up in to the dropdown box, but I want to append the new value to the tickers already selected.

As the main Ticker_Dropdown is creating the graphs.

My issue is that on button click I can’t append to the list of the tickers_dropdown, so I was storing everything to a hidden div. So all I’m getting with this is one selection and it will never overwrite to get 2. The list.append seems to be my problem, or how to update the tickers_dropdown to add from a function and not overwrite.

@app.callback(
    Output(component_id='tickers_dropdown',component_property='value'),
    [Input('button', 'n_clicks')],
    state = [State(component_id='1_drop', component_property='value'),
    State(component_id='2_drop', component_property='value'),
    State(component_id='3_drop',component_property='value'),
    State(component_id='4_drop',component_property='value'),
    State(component_id='5_drop',component_property='value'),
    State(component_id=6_drop',component_property='value'),
    State(component_id='my-div',component_property='children')]
)
def update_ticker_dropdown(n_clicks, 1, 2, 3, 4, 5, 6, tickers_list):
	tickers_filtered = """pandas filter the dataframe that is in the tickers_dropdown by all the 1 to 6 Drop componenets""""

	if tickers_list is None:
		return tickers_filtered.index
	else:
		return tickers_list.append(tickers_filtered.index)
2

One way that you can append an option to an existing set of options is to pass the existing set of options in as State. Here’s a simple example:

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div([
    dcc.Dropdown(
        id='dropdown',
        options=[],
        value=None
    ),
    html.Button('Add Option', id='button', n_clicks=0)
])


@app.callback(
    Output('dropdown', 'options'),
    [Input('button', 'n_clicks')],
    [State('dropdown', 'options')])
def update_options(n_clicks, existing_options):
    option_name = 'Option {}'.format(n_clicks)
    existing_options.append({'label': option_name, 'value': option_name})
    return existing_options


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

dash-append-element-dropdown-options

Does that answer your question? I noticed that your example has Output('tickers_dropdown', 'value') instead of Output('tickers_dropdown', 'options') but it sounded like you were interested in appending options to the dropdown. Sorry if I misinterpreted!

3

It was actually the values I was trying to add more of. I have changed to using the state of the input box and not the hidden “my-div” as I first thought that was the problem first.

My issue was a type issue.
I have been using the index of the dataframe as my values. So I was unable to append a type Int64Index to a list.

If anyone else has this problem the fix was to call the first value of the index in the append function. (spent ages converting astype(np.int64).

return tickers_list.append(tickers_filtered.index[0])

Thanks again Chirs