Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Dropdown and checkbox

have good day and night for everybody.

i’m new in dash and i want ask a question, now i am making a project and getting data from kepserver so, i want to see data interactivity and manipulations. for design i need to get the data of the dropdown and show it as a checkbox. i’m searching a solution but i didn’t find since 1 week.

i need to help, can anyone help me for this problem.

thank you for now.

Hi @ceyhun and wellcame!

Your question is not so clear to me.

Dropdown allow the user to select option from a list and checkbox do something similar, explain a little bit how is the process you need and where are your doubts.

You are right, ı did not explain it clearly.
For exemple i have 30 option in dropdown, i want to choose 5 of them and show this 5 optiom on check box

I hope so, i could explain it.

14 Oca 2021 Per 04:58 tarihinde Eduardo via Plotly Community Forum <plot@discoursemail.com> şunu yazdı:

Hi @ceyhun ,

The question seams to be easy, but it takes me more than I expected.

For some reason I don’t understand the program gave me an error when passing the ‘options’ to the Checklist. I pass [{‘label’: ‘Option3’, ‘value’: ‘Option3’}, {‘label’: ‘and 20 more’, ‘value’: ‘and 20 more’}] and the ERROR said that I passed 2 arguments :thinking:

Finally I add an additional [ ] and it works. Hope someone can explain it to me. :smiley:

This is the basis code you can adapt to your needs:


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

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

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': 'Option1', 'value': 'Option1'},
            {'label': 'Option2', 'value': 'Option2'},
            {'label': 'Option3', 'value': 'Option3'},
            {'label': 'and 20 more', 'value': 'and 20 more'},
        ],
        value=['Option3', 'and 20 more'],
        multi=True,
    ),
    dcc.Checklist(
        id='checklist')
])



@app.callback(
    [Output('checklist', 'options')],
    [Input('dropdown', 'value')])
def update_output(dropdown_value):
    options = [[{'label': i, 'value': i} for i in dropdown_value]]
    
    return options


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

But it shows only one option, how can we show our all selected options

14 Oca 2021 Per 12:41 tarihinde Eduardo via Plotly Community Forum <plot@discoursemail.com> şunu yazdı:

In the dropdown add as many option as you want (You also can provide a list from another callback), then the user can select as many option as he/she want.

All options selected in the dropdown will be shown in the Checklist.

1 Like

eduardo, i’m sure i 'm bothering you, i want to ask a last question :slight_smile:

                         html.Div(
                                 className='div-for-dropdown',
                                 children=[
                                     dcc.Dropdown(id='stockselector', 
                                                  options=[{'label': i, 'value': i} for i in data_list],
                                                  multi=False, 
                                                  value = '',
                                                  style={},
                                                  className='stockselector',
                                                  clearable=False,
                                                  placeholder = 'Select your parameters...',
                                                 
                                                  ),
                                 ],
                                 style={}),
                         html.Div(className='div-for-checklist',
                                 children=[
                                     dcc.Checklist(id = 'choosen_param',
                                                options=[],
                                                labelStyle={'display': 'block', "cursor" : "pointer"},
                                                labelClassName="group-labels",
                                              
                                          
                                            ),
                                     ]),

my layout code is that, and my callback code is

@app.callback(

[dash.dependencies.Output('choosen_param', 'options'),],

[dash.dependencies.Input('stockselector', 'value')],

)    

def update_output(dropdown_value):

    options = [[{'label': i, 'value':i} for i in [dropdown_value]]]

    return options

when i choose the dropdown option, i can see the last option of dropdown_list, it changes everytime but i want to add the checklist.

if i can take dropdown as “multi=True”, there is no problem but “False” it doesnt work.

Thank you

Hi @ceyhun

I didn’t see your question, using @ + username notify the user.

I see you solved your issue.

i solved finally :slight_smile: anyway, thank you