Use a button to set values in drop down using dash

Question

I was wondering is it possible to set multiple values to a drop down value using a button. What I want to be able to do is filter the drop down and then if the user presses the submit button, all options that contain the search_value are added as the drop down value. For example in my code, if you type in 'a' into the drop down search bar then 'Montreal' and 'San Francisco' appear. If the user were to then press the submit button both these options should be added as values to the drop down at once. At the moment I am able to save the most recent search value to user put in but I am having trouble dynamically altering the drop down value. Any help would be greatly appreciated!! Here is my code: FYI: I am running this in a Colab Notebook

**Correct answer

from jupyter_dash import JupyterDash  # pip install dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Output, Input, State
import pandas as pd  # pip install pandas
import plotly.express as px
import dash_table
import math

from dash import no_update

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = JupyterDash(__name__, external_stylesheets=external_stylesheets)

options = [
    {"label": "New York City", "value": "NYC"},
    {"label": "Montreal", "value": "MTL"},
    {"label": "San Francisco", "value": "SF"},
]
app.layout = html.Div([
        html.Div(id='output_data'),
        html.Div(id="hidden-search-value", style={"visibility":"hidden"}),
        html.Div(id="value-test", style={'color':'white'}),
        html.Div(html.Button('Submit', id = 'button', n_clicks=0), style={'width':'49%', 'display':'inline-block'}),


    html.Div(
        dcc.Dropdown(id="my-multi-dynamic-dropdown", multi=True, clearable = True, options = options, style={'width':'49%', 'display':'inline-block'})),
])


@app.callback(
    [Output("hidden-search-value", "children"),
    Output("value-test", "children")],
    Input(component_id="my-multi-dynamic-dropdown", component_property="search_value"),
)
# save previous search value in hidden variable 
def update_hidden_value(value):
    if value == "":
        raise PreventUpdate
    return value, "Select all values containing '{}'".format(value)

@app.callback(
        Output("my-multi-dynamic-dropdown", "value"),
        Input(component_id="button", component_property="n_clicks"),
    [
        State(component_id="output_data", component_property="children"),
        State(component_id="hidden-search-value", component_property="children")
    ]
)
# submit button logic: use saved search value to update drop_down value 
def update_multi_options(n_clicks, children, search_value):
    # submit button pressed
    if int(n_clicks) > 0:
      values = []
      for o in options:
        # all values containing search value
        if search_value.lower() in o["label"].lower():
          values.append(o["value"])
        else:
          continue
      return values
    else:
      return no_update

app.run_server(mode='inline', port=8030)