如何在python dash中创建基于用户多值的动态下拉列表？

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

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Label('选择城市：'),
    dcc.Dropdown(
        id='city-dropdown',
        options=[
            {'label': '北京', 'value': 'bj'},
            {'label': '上海', 'value': 'sh'},
            {'label': '广州', 'value': 'gz'}
        ],
        multi=True
    ),
    html.Label('选择区域：'),
    dcc.Dropdown(id='area-dropdown', multi=True),
    html.Div(id='output')
])

@app.callback(
    Output('area-dropdown', 'options'),
    [Input('city-dropdown', 'value')]
)
def update_area_dropdown(selected_cities):
    if selected_cities is None:
        return []
    
    options = []
    for city in selected_cities:
        if city == 'bj':
            options.extend([
                {'label': '海淀区', 'value': 'hd'},
                {'label': '朝阳区', 'value': 'cy'},
                {'label': '东城区', 'value': 'dc'}
            ])
        elif city == 'sh':
            options.extend([
                {'label': '浦东新区', 'value': 'pd'},
                {'label': '徐汇区', 'value': 'xh'},
                {'label': '静安区', 'value': 'ja'}
            ])
        elif city == 'gz':
            options.extend([
                {'label': '天河区', 'value': 'th'},
                {'label': '越秀区', 'value': 'yx'},
                {'label': '荔湾区', 'value': 'lw'}
            ])
    
    return options

@app.callback(
    Output('output', 'children'),
    [Input('area-dropdown', 'value')]
)
def update_output(selected_areas):
    if selected_areas is None:
        return '请选择区域'
    
    return '你选择的区域是：{}'.format(', '.join(selected_areas))

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