Multiselect Dropdown with "Select All" option

Dash Python
1

I have 3 features: Region, Country and City. For simplicity I will keep the first 2 for now but I would like to apply the same logic to the City dropdown.

I have radioitems for regions: EMEA, APAC, Americas, All. I have a dropdown for country. The way I have it now is that the country dropdown will automatically update the options based on the user’s choice in the region (e.g. if user chooses APAC from the radio button, they can only see countries for APAC).

How can I add in the dropdown a Select All option? Bearing in mind that for some regions I have a lot of countries (ideally I want that when the user chooses Select All, I want just ‘All’ to be displayed in the dropdown rather then choosing a list of all countries.

This is the code I have so far:

# Create country options for regions
country_options = {
    'EMEA': ['France', 'Germany', 'Greece', 'Hungary', 'Italy', 'Kenya', 'Lithuania', 'Norway', 'Romania', 'Russia', 'South Africa', 'Spain', 'United Kingdom'],
    'APAC': ['Australia', 'China', 'Japan', 'New Zealand', 'Singapore', 'South Korea', 'Taiwan', 'Thailand'],
    'Americas': ['Canada', 'Chile', 'Colombia', 'United States'],
    'All': ['France', 'Germany', 'Greece', 'Hungary', 'Italy', 'Kenya', 'Lithuania', 'Norway', 'Romania', 'Russia', 'South Africa', 'Spain', 'United Kingdom', 'Australia', 'China', 'Japan', 'New Zealand',
            'Singapore', 'South Korea', 'Taiwan', 'Thailand', 'Canada', 'Chile', 'Colombia', 'United States']
}

# Region radioitems
html.Label('Region:'),
dcc.RadioItems(id='region_radio', className='radio',
               options=[{'label': str(c), 'value': c} for c in sorted(df['Region'].unique())] + [{'label': 'All regions' , 'value': 'All'}]),

# Country dropdown
html.Label('Country:'),
dcc.Dropdown(id='country_checklist',
             value=[],
             multi=True)


# CALLBACKS
# Update country checklist based on user input in region
@callback(
    Output('country_checklist', 'options'),
    Input('region_radio', 'value')
)
def set_country_options(selected_region):
    if not selected_region:
        return dash.no_update
    else:
        return [{'label': i, 'value': i} for i in sorted(country_options[selected_region])]

This is my output now:

image

I need to select all countries one by one. How can I add a select all option (also “Select All” is chosen, I just want the dropdown to read “All”, I don’t want to have the whole list displayed.

2

I think it would be better if you made it some buttons.

Like this, my demo.

3

I just checked your demo, thanks for sharing. But when you select ‘All’ its giving you the whole list inside the dropdown. If I have over 500 entries, the list will be huge. Is there a way to instead of listing all values to have one ‘All’?

4

You might as well think differently, ALL means no limit, you may consider making this dropdown disabled or not displayed when you select ALL.

5

And if you want a perfect outcome, I suggest you duplicate your records and give both two levels of markers in the same column. I mean duplicate your records, not markers. And you may need to write another callback to make sure your ALL option is mutually exclusive with others.