Updating dropdown values on the basis of previous dropdown selection

Hi! So I have uploaded a dataframe whose columns are used as options in two dropdowns. What I am trying to achieve is that if I select an option from the first dropdown, it should not show up in the options of the second dropdown. How can I do this? Thanks in advance!

Hi @zenith,
Could you provide a dataframe sample?
Generally speaking: what you have to do is a callback with the id of the first dropdown that filters out the value from the dataframe and returns that.

app.layout = html.Div(
	[
		html.Hr(style={'margin_bottom':'35px'}),
		dbc.Row(
			[
				dbc.Col(
					[
						html.H6("TITLE",style={'margin-left':'20px'}),
						dbc.Col(
		                    dcc.Dropdown(
		                        id='dropdown_to_filter',
		                        options=[{'label': i, 'value': i} for i in dataframe['column'].unique()],
		                        placeholder='Select',
		                        value="initial value",
		                        className="dropdown",
		                        multi=False
		                    ),
		                 ),
					],
					xs=12, sm=12, md=3, lg=3, xl=2,
				),
				dbc.Col(
					[
						html.H6("Second Dropdown",style={'margin-left':'20px'}),
						dbc.Col(
		                    dcc.Dropdown(
		                        id='second_dropdown',
		                        className="dropdown",
		                        placeholder='Select',
		                        value="Initial Value",
		                        multi=False
		                    ),
		                 ),
					],
					xs=12, sm=12, md=3, lg=3, xl=2,
				),
        ],
)

@app.callback(
    Output(component_id="second_dropdown", component_property="options"),
    Input(component_id="dropdown_to_filter", component_property="value")
)

def update_dropdown(value):
df_filtered = your_dataframe
	df_dropdown_second = df_filtered[df_filtered['your_column'] != value]
	return [{'label': i, 'value': i} for i in df_dropdown_second['your_column'].unique()]

What does this do?
Basically it gets the value from the first dropdown, filters the dataframe to exclude that value, and populates the second dropdown with the values previously filtered.

As I said, a sample working code and dataframe would help a lot in answering, but I hope the general example can help.

Thanks for taking the time to answer. I will try this approach and let you know. As for the the dataframe that I am working with, I am using the Loan_Status dataset which has the following columns:

[‘Gender’, ‘Married’, ‘Dependents’, ‘Education’, ‘Self_Employed’, ‘ApplicantIncome’, ‘CoapplicantIncome’, ‘LoanAmount’, ‘Loan_Amount_Term’, ‘Credit_History’, ‘Rural’, ‘Semiurban’, ‘Urban’, ‘Loan_Status’]

The callback that I am using right now, updates both the dropdowns with all the dataframe columns.

@app.callback([Output('target-variable-dropdown','options'),Output('feature-columns','options')],
              [Input('stored-data','data')])
def output_target_column(data):
    if data is None:
        raise PreventUpdate
    else:
        data = pd.DataFrame(data)
        print(data.shape)
        #all_columns = [data.columns]
        #feature_columns = all_columns.remove(value)
        options1 = [{'label':i,'value':i} for i in data.columns]
        options2 = [{'label':i,'value':i} for i in data.columns]
        return options1,options2

What I essentially want is that, if I select a value from the dropdown with id

‘target-variable-dropdown’

which depicts the target variable of the dataframe(which is Loan_Status in this case), this variable should not show in the second dropdown with the id

‘feature-columns’

1 Like

I believe that if you apply the solution I presented you’ll get the result you’re looking for.

1 Like