Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

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