# Adding a 'select-all' option in multi-select dropdown

**URL:** <https://community.plotly.com/t/adding-a-select-all-option-in-multi-select-dropdown/55156>\
**Category:** Dash Python\
**Created:** [July 30, 2021, 12:24pm UTC](https://community.plotly.com/t/adding-a-select-all-option-in-multi-select-dropdown/55156 "2021-07-30T12:24:08Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![sheryna92](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sheryna92](https://community.plotly.com/u/sheryna92)\
**Post date:** [July 30, 2021, 12:24pm UTC](https://community.plotly.com/t/adding-a-select-all-option-in-multi-select-dropdown/55156/1 "2021-07-30T12:24:08Z")

</div>

I am pretty new to dash and been struggling with a seemingly simple issue of adding a ‘Select All option’ to my dropdown.  
Here is my code and would really appreciate if someone can help me out here . Thank you in advance

```
app = dash.Dash( __name__ )

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash( __name__ , external_stylesheets=external_stylesheets)

all = df.Pillar.unique()

all_1 = df['PRO Manager'].unique()

app.layout=html.Div([
    html.H1("PRO Project Management dashboard"),
    
    html.Div([
        html.Div([
        html.P('Pillar'),
        dcc.Dropdown(id='pillar-choice', options=[{'label':x, 'value':x} for x in all] + [{'label': 'Select All', 'value': all}], value= all, multi=True),
    ],className='six columns'), 
     
 @app.callback(
 Output(component_id='graph1', component_property='figure'),
 Input(component_id='pillar-choice', component_property='value'),
)
def update_graph1(value_pillar):
if value_pillar == 'Select All':
    dff = df
else:
    dff = df[df.Pillar.isin(value_pillar)]
    fig = px.pie(data_frame=dff, names='Pillar', values='Project No', title='Number of Projects by Pillars')
    return fig
```

---

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [July 30, 2021, 2:24pm UTC](https://community.plotly.com/t/adding-a-select-all-option-in-multi-select-dropdown/55156/2 "2021-07-30T14:24:50Z")

</div>

Hi @sheryna92 and welcome to the Dash Community

There are different ways to do that but this one works for me:  
Build the options outside the dcc.Dropdown and add the additional option **all** using **append** like this:

```auto
options=[{'label':x , 'value':x} for x in all]
options.append({'label': 'Select All', 'value': "all"})

print(options)
app.layout=html.Div([
    html.H1("PRO Project Management dashboard"),
    
    html.Div([
        html.Div([
            html.P('Pillar'),
            dcc.Dropdown(id='pillar-choice', 
                         options=options, 
                         value= "for", multi=True),
        ],className='six columns'), 
    ])
])

```

---

<div class="post-metadata">

**Author:** ![sheryna92](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sheryna92](https://community.plotly.com/u/sheryna92)\
**Post date:** [August 1, 2021, 11:48am UTC](https://community.plotly.com/t/adding-a-select-all-option-in-multi-select-dropdown/55156/3 "2021-08-01T11:48:47Z")

</div>

Hi @Eduardo ,

Thank you for responding.

I tried your method and I am getting the following error.

TypeError: only list-like objects are allowed to be passed to isin(), you passed a [str]

---

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [August 1, 2021, 1:26pm UTC](https://community.plotly.com/t/adding-a-select-all-option-in-multi-select-dropdown/55156/4 "2021-08-01T13:26:51Z")

</div>

Hey @sheryna92

You asked about how to add a “select-all” option in dropdown, this is an example of the method applied in my post:

```auto
import pandas as pd

data = [[5, 10,56], [26, 15, 23], [18, 8, 14]]

# DataFrame
all = pd.DataFrame(data, columns = ['First', 'Second', 'Third'])

# build the options from DataFrame:
options=[{'label':x, 'value':x} for x in all]
# result
print("Options build: ", options)
Out> Options build: [{'label': 'First', 'value': 'First'}, {'label': 'Second', 'value': 'Second'}, {'label': 'Third', 'value': 'Third'}]

#add a new item
options.append({'label': 'Select All', 'value': 'all'})
# new result
print("New Options build: ",options)
Out> New Options build: [{'label': 'First', 'value': 'First'}, {'label': 'Second', 'value': 'Second'}, {'label': 'Third', 'value': 'Third'}, {'label': 'Select All', 'value': 'all'}]

```

As you can see, the append method adds a new element of the dictionary with the desired option introduced.

Thats means your dropdown should be showing the added option to the user. If that happens I solved your first issue 😀

The error you are facing now, is related with the way the figure is builded, I do not have your dataframe and can’t do any detail analysis but let me say two things:

- Take in mind that if you useed my sugestion the **value** property in **value\_pillar** is **all** and not **Select All**.
- The error message says that the information required for **isin()** must be a **list object** and you are passing a **string value** , review the following row:

```auto
dff = df[df.Pillar.isin(value_pillar)]

```

Perhaps you need to use:

```auto
dff = df[df.Pillar.isin([value_pillar])]

```

---

<div class="post-metadata">

**Author:** ![sheryna92](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sheryna92](https://community.plotly.com/u/sheryna92)\
**Post date:** [August 1, 2021, 2:41pm UTC](https://community.plotly.com/t/adding-a-select-all-option-in-multi-select-dropdown/55156/5 "2021-08-01T14:41:42Z")

</div>

I think the first problem is definitely solved. I do see the ‘Select All’ option in the dropdown and with the following code I do not get any errror but the graph is still blank. I can’t think what could be the issue. Any thoughts ? 🙂

```
app = dash.Dash( __name__ )

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash( __name__ , external_stylesheets=external_stylesheets)

all = df.Pillar.unique()

options=[{'label':x , 'value':x} for x in all]
options.append({'label': 'Select All', 'value': "all"})

app.layout=html.Div([
html.H1("PRO Project Management dashboard"),

    html.Div([
    html.P('Pillar'),
    dcc.Dropdown(id='pillar-choice', options=options, value= 'for', multi=True),
]),
    
   
html.Div([
        dcc.Graph(id='graph1', style={'display':'inline-block', 'width' :'33%'})
    
 ]),

])

@app.callback(
Output(component_id='graph1', component_property='figure'),
Input(component_id='pillar-choice', component_property='value') 
)

def update_graph1(value_pillar):
if value_pillar == 'options':
    dff = df
else:
    dff = df[df.Pillar.isin([value_pillar])]
    fig = px.pie(data_frame=dff, names='Pillar', values='Project No', title='Number of Projects by Pillars')
    return fig

if __name__ ==' __main__':
app.run_server()
```

---

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [August 1, 2021, 2:46pm UTC](https://community.plotly.com/t/adding-a-select-all-option-in-multi-select-dropdown/55156/6 "2021-08-01T14:46:58Z")

</div>

Could you provide a sample df with some data you are using (columns names and some rows data) 🤔