使用dashcallback_context()函数实现下拉菜单联动

dash.callback_context函数是Dash框架中的一个内置函数，可以用于获取正在调用回调函数的触发事件信息。该函数返回的是一个CallbackContext对象，包含了与当前回调函数相关的所有信息，例如触发回调函数的输入组件的id及其对应的value等。

下面是一个使用dash.callback_context函数实现下拉菜单联动的例子：

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

app = dash.Dash(__name__)

app.layout = html.Div(
    children=[
        html.H1("下拉菜单联动示例"),

        #       个下拉菜单
        dcc.Dropdown(
            id='dropdown-1',
            options=[
                {'label': '选项1', 'value': 'option-1'},
                {'label': '选项2', 'value': 'option-2'}
            ],
            value='option-1'
        ),

        # 第二个下拉菜单
        dcc.Dropdown(
            id='dropdown-2'
        ),

        html.Br(),

        # 显示下拉菜单选项的结果
        html.Div(id='output')
    ]
)


@app.callback(
    Output('dropdown-2', 'options'),
    [Input('dropdown-1', 'value')]
)
def update_dropdown_2(value):
    if value == 'option-1':
        return [
            {'label': '子选项1', 'value': 'sub-option-1'},
            {'label': '子选项2', 'value': 'sub-option-2'}
        ]
    elif value == 'option-2':
        return [
            {'label': '子选项3', 'value': 'sub-option-3'},
            {'label': '子选项4', 'value': 'sub-option-4'}
        ]
    else:
        return []


@app.callback(
    Output('output', 'children'),
    [Input('dropdown-1', 'value'), Input('dropdown-2', 'value')],
    state=[State('dropdown-1', 'options')]
)
def update_output(value_1, value_2, options_1):
    label_1 = next((option['label'] for option in options_1 if option['value'] == value_1), '')
    label_2 = next((option['label'] for option in dash.callback_context.triggered if option['prop_id'] == 'dropdown-2.value'), '')
  
    if label_1 and label_2:
        return f"你选择了：{label_1} -> {label_2}"
    elif label_1:
        return f"你选择了：{label_1}"
    else:
        return "请选择一个选项"


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

这个例子中，我们定义了一个包含了两个下拉菜单以及一个用于显示结果的<div>的布局。 个下拉菜单的选项有两个：'选项1'和'选项2'，以及初始值设置为'选项1'；第二个下拉菜单的选项是通过在 个下拉菜单的回调函数中动态生成的，该函数根据 个下拉菜单的选中值切换而动态显示不同的子选项。

在 个回调函数update_dropdown_2中，我们通过获取dash.callback_context的返回值来获取当前回调函数的触发事件信息，即 个下拉菜单的选中值。根据这个值，我们返回相应的子选项列表以更新第二个下拉菜单的选项。

在第二个回调函数update_output中，除了获取 个下拉菜单的选中值，我们还获取了第二个下拉菜单的选中值及 个下拉菜单的选项列表，这些都是通过state参数传递进来的。同时，我们还获取了当前回调函数的触发事件中的dropdown-2.value属性的label，以显示在结果<div>中。

这样，当我们在 个下拉菜单中选中一个选项时，第二个下拉菜单的选项会相应地更新。当同时选中 个下拉菜单和第二个下拉菜单的选项时，在结果<div>中会显示当前的选择。

总结一下，dash.callback_context()函数可以帮助我们获取回调函数中当前的触发事件信息，从而实现下拉菜单的联动效果。