Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Leave all options open in dcc.Dropdown after one is selected

Hi all,

I want to have a dropdown that does not leave out options after choosing them. So if in the example below I pick “1”, then I want to be able to pick that again (now the selection becomes 2,3,4,5 after picking 1). Is this possible?

Thanks in advanced!

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([
    dcc.Dropdown(
                    options=[{'label':i, 'value':i} for i in range(0,5)],
                    value=[],
                    multi=True
                )
    ])
if __name__ == '__main__':
    app.run_server(debug=True)

Hi @Rumiko,

If what you want is in a multi dropdown to have the possibility to select an element more than ones I think it is not allowed.

If you want to select one option in different moment and have the posibility to select it again you need to set multi option False or clear the value of the dropdown ones it is used.

1 Like

Hi Eduardo,

Thank you for replying. The reason I am asking is because depending on the first selection in a dropdown, I need again the same amount of corresponding numbers with that. Now I tried this, but I am clueless on how to get back the output.

Here some example code. So if I pick 2 variables in the first dropdown, there are 2 options to be filled, if I pick 3, I get 3 options that need to be filled. However, how do I get those chosen options back? It stored in html.Div(id=‘amount-of-picks’).

import pandas as pd
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash

'''De data'''
url = 'https://raw.githubusercontent.com/SimonTeg/multiple_regressions/main/MMM_data.csv'
df = pd.read_csv(url, error_bad_lines=False)

variable_names = list(df.columns)
var_options = []
for var in list(df.columns):
    var_options.append({'label': str(var), 'value': var})

app = dash.Dash()

layout = html.Div([
    html.Br(),
    html.H6("Response curve variables:", style={'color': 'white'}),
    dcc.Dropdown(
        id='response-curve',
        options=var_options,
        value=['tv','radio'],
        multi=True
    ),
    html.Br(),
    html.Div(id='title-response-cuves'),
    html.Div(id='amount-of-picks')

], className="dash-bootstrap")

app.layout = layout


@app.callback(
    Output(component_id='amount-of-picks', component_property='children'),
    [Input(component_id='response-curve', component_property='value')]
)
def update_output(input):
    dropdowns = []
    for var in input:
        dropdowns.append(
            dcc.Dropdown(
                id='response-curve-shape-'+var,
                options=[{'label':i, 'value':i} for i in range(0,100)],
                value=[],
                multi=True
            )
        )
    return dropdowns

@app.callback(
    Output(component_id='title-response-cuves', component_property='children'),
    [Input(component_id='response-curve', component_property='value')]
)
def update_output(input):
    variables = ""
    for var in input:
        variables = variables + var + ", "
    if len(input)>0:
        Title = "Shapes for " + variables[:-1]
    else:
        Title = ""
    return html.H6(Title)

if __name__ == '__main__':
    app.run_server(debug=True)

Thanks in advanced!

Sorry @Rumiko, I can’t understand your problem.

In the first dropdown user can chose multiple options, depending how many options the user chose is the number of new dropdowns that are abailable.

What is the next step that you can’t do? what must be in each dropdown as options? :thinking:

1 Like

Hi @Rumiko
Your question is unclear to me as well. Are you’re trying to do a chained Dropdown?

1 Like

Hi @Eduardo and @adamschroeder, thank you for looking at my question. And sorry for not making it clear.

What I need is the values from the new dropdowns that appear. So for example, if I pick tv, radio, sales in the first dropdown, 3 other dropdowns appear. And in those dropdowns I fill in 1, 4, 5. I need to get those values (1, 4, 5) for my next graph with a @callback.

But since they are dynamical I have no idea how to get them. Although I do have the id’s of the 3 dropdown (id=‘response-curve-shape-’+var, var from [tv, radio, sales]).

Hope this makes sense?

I absolutely love Dash

Hey @Rumiko,

One thing that I enjoy about answering other user’s question is a kind of satisfaction of getting new problems and try to find solutions.

In your case, trying to understand what your problem is, its a problem in itself :joy: :joy: that means I can have two different satisfactions here :grinning: thank you about that :joy: :joy:

I think I have an idea about what your problem is (still not so sure :thinking:):

You are using the values that the user picks as part of the ‘¡d name’ of each new dropdown, and your problem is how to identify those names?

well if this is the issue you have two alternatives;

  1. As the callback that bilds the new dropdowns allways will change the components of the Div ‘amount-of-picks’ if the first dropdown is changed, you can use the ‘value’ of the first dropdown to rebild the name of each dropdown in another callback-

  2. Not use the value of the first dropdown as part of each new dropdown, instead you can add a correlative number, then you call each dropdown for its number.

Now I’m wondering if I get at least one solution. :laughing:

1 Like

Hey @Eduardo,

Haha, thanks for your lovely reply. I do find it hard to formulate my problem:)
I think you are right with option 1.

So I need to have the input values from the dropdowns with id='response-curve-shape-'+var for my next graph.

So if tv and radio is picked with 2 and 3. I need to have a list with [2,3].
image
But if someone picks tv, radio, holidays, with 2,3,1 I need to have that list with [2,3,1]
image

Makes any sense?:slight_smile:

I want to add it to this dashboard, to do regressions with different functies over X:

I was already so proud at getting this far:)

Hey @Rumiko I’m happy to know that!! :smiley:

And thanks for shearing the same sense of humor :laughing:

It means I can enjoy a double satisfaction today, I got the two solutions :joy: :joy:

Just click the solution and heart buttons and I will receive a 4 in 1 for Christmmas. :boom: :boom: :boom: :boom:

1 Like

Hi @Eduardo,

I do enjoy this a lot too haha. I hope you had a lovely Christmas.

Could I do something like this:

@app.callback(
    Output(component_id='values-picks', component_property='children'),
    [Input(component_id='response-curve', component_property='value')]
)
def get_values(variables):
    values = []
    for var in variables:
        values.append(Input(component_id='response-curve-shape-'+var, component_property='value'))
    return values

Hi @Rumiko,

Happy Christmas to you.

I was thinking a little bit in your problem and I think your solution could come from this link:

I hope it helps.

1 Like

Hey @Eduardo,

That seems to be very helpful, thanks a lot!
Christmas is a bit weird in the Netherlands now. Hope it is well for you.

Cheers,
Simon

Hey Simon,

Nice to know that it helps. :grinning:

I’m in Argentina, where the COVID issues are a bit weird since Easter :joy: :joy: (we have a lockdown since March 17), as an example to understand our leaders: the schools were closed the entire Year and nobody knows if will resume next March. But the worst part is that we reach the highest number of dead for population.

The economy are also a bit weird since decades :joy: :joy: :joy: and our Government are doing a very strong effort to worsen it. :woozy_face:

Living in this context If we don’t add a bit of humor we are dead. :grinning:

Hey Eduardo,

Yeah that was just what I needed:)

That sounds awful, people with political power are usually not the ones we wish to be in those positions. Hope it will improve soon, and YES to some humor!

I expect to see you around here

1 Like