Limit numbers of selections for multi-drop downs

Dash Python
1

Hi all.

I made 3 different multi selection drop downs and I would like to limit the total selected items out of the three drop downs to 5, is there a dynamic way to do it?

such as if I select 3 out of the first one, then I would only be able to select at most two from the second and third, if I select 1 from the second, then I can only at most select 1 item from the last?

Thanks

2

Hi There! This is an interesting question.

The closest I believe we could get is something like the below toy app. I have three callbacks pointing to the disabled property of each of the three dropdowns. If the total number of options picked in the three callbacks reaches 5, I set all the dropdowns to disabled.

The problem is once set to disabled, the dropdown is ENTIRELY disabled. I could imagine a new component property being potentially useful: Something that disables the selection of new options but still allows a user to deselect.

I’d be interested to see if the community has any other thoughts on a potential workaround.

Also cc @chriddyp

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

app = dash.Dash()

app.layout = html.Div([
    dcc.Dropdown(
        options=[
            {'label': 'one', 'value': 'one'},
            {'label': 'two', 'value': 'two'},
            {'label': 'three', 'value': 'three'}
        ],
        multi=True,
        id='dropdown-one',
        value=['one']
    ),
    dcc.Dropdown(
        options=[
            {'label': 'four', 'value': 'four'},
            {'label': 'five', 'value': 'five'},
            {'label': 'six', 'value': 'six'}
        ],
        multi=True,
        id='dropdown-two',
        value=['six']
    ),
    dcc.Dropdown(
        options=[
            {'label': 'seven', 'value': 'seven'},
            {'label': 'eight', 'value': 'eight'},
            {'label': 'nine', 'value': 'nine'}
        ],
        multi=True,
        id='dropdown-three',
        value=['eight']
    ),
    html.Div(id='results')
])


@app.callback(
    Output('results', 'children'),
    [Input('dropdown-one', 'value'), Input('dropdown-two', 'value'),
     Input('dropdown-three', 'value')]
)
def display_results(val1, val2, val3):
    full_list = val1+val2+val3
    return json.dumps(full_list)


@app.callback(
    Output('dropdown-one', 'disabled'),
    [Input('dropdown-one', 'value'), Input('dropdown-two', 'value'),
     Input('dropdown-three', 'value')]
)
def disable_dropdown_one(val1, val2, val3):
    full_list = val1+val2+val3
    if len(full_list) >= 5:
        return True
    else:
        return False


@app.callback(
    Output('dropdown-two', 'disabled'),
    [Input('dropdown-one', 'value'), Input('dropdown-two', 'value'),
     Input('dropdown-three', 'value')]
)
def disable_dropdown_two(val1, val2, val3):
    full_list = val1+val2+val3
    if len(full_list) >= 5:
        return True
    else:
        return False


@app.callback(
    Output('dropdown-three', 'disabled'),
    [Input('dropdown-one', 'value'), Input('dropdown-two', 'value'),
     Input('dropdown-three', 'value')]
)
def disable_dropdown_three(val1, val2, val3):
    full_list = val1+val2+val3
    if len(full_list) >= 5:
        return True
    else:
        return False


if __name__ == '__main__':
    app.run_server()
1 Like
3

Thank you! it’s very helpful, but yeah, wish in the future there’s a work around to avoid disabling entirely. Thanks :heart:

4

Or perhaps a max_selections_allowed property would work here

3 Likes
5

I have a similar question. I want to set the multi property of a drop-down to False dynamically. I tried using something like below

@app.callback(Output("drop-down","multi),[Input("toggle-button","value")])
def change_multi_property(toggle_value):
     return toggle_value

But the page gets unresponsive. Can anyone suggest a workaround?

6

Hi @chriddyp, is there still a plan to implement some sort of “max_selections_allowed” for the multi select drop downs? I think this would be extremely helpful.

1 Like
7

I agree, max_selections_allowed would be very helpful!

3 Likes