Black Lives Matter. Please consider donating to Black Girls Code today.

Dynamically change the content of input drop down list values

Currently I have a Dash app which will plot the graph based on the user’s selection from drop down list.

I have defined the dcc. Dropdown component inside the app.layout (). The ‘label’ and ‘value’ pairs for the drop down is getting populated from a csv file.
My callback function has the ‘value’ property of the dropdown as input and ‘figure’ property of the graph as the out put.

Output graph get the underlying data from a dataframe defined inside the call back function.

Now the problem is that the drop down list values remains static. It retains the value read from the csv file at the time I invoked the Dash app.

I need to set the drop down list values dynamically so that drop down list has to be updated with the latest values from the csv file.

Can any one provide some idea on how to implement this.

@anjutk - you can dynamically set the options parameter of the dropdown just like any other property. See the second example under “Multiple Outputs” here for an example: (changing city options based off of the selected country).


Thanks Chris. That worked!.
I kept the options parameter of the dropdown as output of a new callback function. Kept a ‘hidden’ button’s n_clicks property as input for that callback because without an input the output values were not populating.

Now the drop down list updates with latest values upon each page refresh.