How to make multiple callback generated drop down menu display selections at the same time

Dash Python
1

Hi there,

I created two drop drowns that has callback generated sub-drop-downs, however, when I update one of them, the selection in the other one gets cleared, is there anyway to retain selections for sub-drop-downs for multiple callback populated drop downs?

demo
demo.gif412×548 92.9 KB

my code is here:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, Event, State
import plotly.graph_objs as go
from datetime import datetime as dt
from units import *

app = dash.Dash(__name__)
server = app.server

app.css.append_css({'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'})

year = list(range(2010,2019))
month = list(range(1,13))

app.layout = html.Div(children=[

	#the filter div
	html.Div([

		#geo
	    html.Div([
	    	dcc.Dropdown(
	    		id='geospatial',
	    		options=[{'label': i, 'value': i} for i in ['Borough','Community Board','Zipcode','CT2010', 'CB2010']],
                value=[], 
                placeholder="Select a geospatial unit"),

	    	dcc.Dropdown(
	    		id='geospatial_child',
	    		multi=True),

	    	html.Hr(),

	    #temporal
	    html.Div([
	    	dcc.DatePickerRange(
		        id='date-picker',
		        clearable=True,
		        min_date_allowed=dt(2010, 1, 1),
		        max_date_allowed=dt(2018, 5, 2),
		        initial_visible_month=dt(2017, 8, 5),
		        end_date=dt(2017, 8, 25)),

	    	html.Hr(),

	    	]),

	    # #categorical
	    html.Div([
	    	dcc.Dropdown(
	    		id='categorical',
	    		options=[{'label': i, 'value': i} for i in ['complaint type','agency']],
                value=[], 
                placeholder="Select a categorical unit"),

	    	dcc.Dropdown(
	    		id='categorical_child',
	    		multi=True),

	    	html.Hr(),

	    	])
    ]), 
    ])
])

@app.callback(
	Output('geospatial_child', 'options'),
	[Input('geospatial', 'value')])
def get_geospatial_child(spatial_unit):
	if spatial_unit == 'Borough':
		return [{'label': i, 'value': i} for i in borough]
	elif spatial_unit == 'CT2010':
		return [{'label': i, 'value': i} for i in ct2010]
	elif spatial_unit == 'CB2010':
		return [{'label': i, 'value': i} for i in cb2010]
	elif spatial_unit == 'Zipcode':
		return [{'label': i, 'value': i} for i in zipcode]
	elif spatial_unit == 'Community Board':
		return [{'label': i, 'value': i} for i in community_board]

@app.callback(
	Output('categorical_child', 'options'),
	[Input('categorical', 'value')])
def get_geospatial_child(categorical_unit):
	if categorical_unit == 'complaint type':
		return [{'label': i, 'value': i} for i in complaint_type]
	elif categorical_unit == 'agency':
		return [{'label': i, 'value': i} for i in agency]

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

Is this the complete app? From the two callbacks it seems like there shouldn’t be an issue.

Can you try creating a toy version of this to see if the behavior is replicated? From what I see, each parent dropdown should simply be updating it’s child, without changing anything else.

3

Yeah, but when I update the second parent, after making selection with the first parent&children, the first selections got erased for some reason.

4

It could be because both callback functions are called get_geospatial_child(…)?

1 Like
5

ah, didn’t see that stupid mistake, thank you so much

6

No problem =) we all make those