用户如何将自己的值添加到 dash_core_components.Dropdown？

Question

在我的下拉列表中，您应该 select 来自工作场所列表，但您也应该能够插入自己的值。

如何在列表末尾添加像 "add value..." 这样的输入字段？

Answer 1

实现创建回调的基本版本，该回调将选项附加到选项列表。以下示例使用按钮单击作为 Input 和输入值作为 State:

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

app = Dash(__name__)

app.layout = html.Div(
    [
        dcc.Dropdown(
            id="dropdown",
            options=[
                {"label": "a", "value": "a"},
                {"label": "b", "value": "b"},
                {"label": "c", "value": "c"},
            ],
            value="a",
        ),
        dcc.Input(id="input", value="", placeholder="add value..."),
        html.Button("Add Option", id="submit", n_clicks=0),
    ]
)


@app.callback(
    Output("dropdown", "options"),
    Input("submit", "n_clicks"),
    State("input", "value"),
    State("dropdown", "options"),
    prevent_initial_call=True,
)
def add_dropdown_option(n_clicks, input_value, options):
    return options + [{"label": input_value, "value": input_value}]


if __name__ == "__main__":
    app.run_server()

用户如何将自己的值添加到 dash_core_components.Dropdown？

How can user add their own values to a dash_core_components.Dropdown?

python

plotly-dash