title: How to add select all option in dash dropdown component?
body: <p>I am building a dashboard in plotly dash.
  I am using dcc.dropdown, I have a total of 40 values to show. Now, I want to add select all options in that.</p>
  <p>I have tried the below code but you have to select one by one option and it considers all options selected.</p>
  <p>Can anyone please help to find out how to select all values at once?</p>
  <pre><code>import dash
  import dash_core_components as dcc
  import dash_html_components as html
  from dash.dependencies import Input, Output, State
  from dash.exceptions import PreventUpdate
  
  import dash
  import dash_core_components as dcc
  import dash_html_components as html
  import dash_daq as daq
  from dash.dependencies import Input, Output, State
  
  import plotly.graph_objs as go
  from dash.exceptions import PreventUpdate
  
  xTime=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  
  listofY=['y1','y2','y3','y4','y5','y6','y7','y8','y9','y10']
  
  Table={
         'y1':[20, 14, 25, 16, 18, 22, 19, 15, 12, 16, 14, 17],
         'y2':[19, 18, 22, 14, 15, 19, 15, 14, 14, 21, 16, 16],
         'y3':[11, 14, 21, 16, 16, 10, 15, 11, 10, 12, 11, 16],
         'y4':[14, 10, 27, 14, 16, 14, 15, 18, 14, 12, 12, 16],
         'y5':[16, 15, 22, 18, 18, 19, 15, 13, 15, 12, 18, 17],
         'y6':[18, 17, 25, 14, 16, 11, 13, 14, 20, 14, 12, 18],
         'y7':[11, 14, 22, 14, 13, 19, 15, 17, 14, 12, 17, 19],
         'y8':[13, 14, 20, 14, 16, 17, 15, 14, 10, 13, 14, 20],
         'y9':[15, 15, 22, 15, 11, 13, 15, 14, 11, 14, 12, 22],
         'y10':[10, 11, 22, 14, 16, 21, 15, 14, 10, 12, 11, 16]
         }
  
  app = dash.Dash()
  
  app.layout = html.Div([
      html.Div([
          dcc.Dropdown(
              id='product-choice',
              options=[{'label': i, 'value': i} for i in listofY], 
              value=['y1', 'y2', 'y5'],
              multi=True
          ),
          html.Div([
              dcc.Checklist(
                  id='select-all',
                  options=[{'label': 'Select All', 'value': 1}], 
                  values=[]
              )
          ], id='checklist-container')
      ]),
      
      html.Div(children=[
          dcc.Graph(
              id='bar-graph-by-model'
          ),
      ]),                
  ])
  
  @app.callback(
      Output('product-choice', 'value'),
      [Input('select-all', 'values')],
      [State('product-choice', 'options')])
  def test(selectALL, options):
      if len(selectALL) &gt; 0:
          return [i['value'] for i in options]
      else:
          raise PreventUpdate()
  
  @app.callback(
      Output('checklist-container', 'children'),
      [Input('product-choice', 'value')],
      [State('product-choice', 'options'),
       State('select-all', 'values')])
  def tester(chosenValues, availableChoices, selectALL):
      
      if len(chosenValues) &lt; len(availableChoices) and len(selectALL) == 0:
          raise PreventUpdate()
  
      elif len(chosenValues) &lt; len(availableChoices) and len(selectALL) == 1:
          return  dcc.Checklist(id='select-all',
                      options=[{'label': 'Select All', 'value': 1}], values=[])
  
      elif len(chosenValues) == len(availableChoices) and len(selectALL) == 1:
          raise PreventUpdate()
  
      return  dcc.Checklist(id='select-all',
                      options=[{'label': 'Select All', 'value': 1}], values=[1])  
      
          
  @app.callback(
          Output('bar-graph-by-model', 'figure'),
          [Input('product-choice', 'value')]
  )
  def updategraph(value):
      traces=[]
      for i in value:
          x=xTime
          ytemp=Table[i]
          traces.append(go.Bar(
              x=x,
              y=ytemp,
              name=i,
          ))
      return {
          'data': traces,
          'layout': go.Layout(
              )
     }
          
  if __name__ == '__main__':
     app.run_server(debug=True, port=8051)
  </code></pre>