Dash㉟（Dropdownコンポーネント／複数選択）

Dropdownのオプション

Dropdownコンポーネントには下記のようなオプションがあります。

オプション データ型 内容
clearable ブール型 Trueの場合、ドロップダウンの右側に全ての要素を消去するための×印を表示する。デフォルト値はTrue。
multi ブール型 Trueの場合、複数選択が有効になる。デフォルト値はFalse。
options 辞書型 選択肢を次の３つのキーを用いて作成する。
・label 選択肢のラベル（文字列または数値：必須）
・value 選択肢の値（文字列または数値：必須）
・disable Trueが渡された選択を無効にする（ブール型：任意）
searchable ブール型 Trueが渡された場合、選択肢の検索機能が利用できる。デフォルト値はTrue。

Dropdownコンポーネント（複数選択）

Dropdownのオプション multi にTrueを設定し複数選択を可能にします。（18行目）

初期値には、選択肢を複数指定するためにリスト型を設定しています。（17行目）

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        dcc.Dropdown(id='dropdown1',
            options=[
                {'label':'愛媛', 'value':'ehime'},
                {'label':'香川', 'value':'kagawa'},
                {'label':'徳島', 'value':'tokushima'},
                {'label':'高知', 'value':'kouchi'}
            ],
            value=['ehime', 'kouchi'],  # 選択初期値を複数指定
            multi=True                  # 複数選択可能に
        ),
        html.Div(id='div1')
    ],
    style={'width':'80%', 'margin':'auto'}
)

# コールバック
@app.callback(
    Output('div1', 'children'),
    Input('dropdown1', 'value')
)
def change_img(dropdown1):
    return '選択しているのは"{}"です'.format(dropdown1)

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

[ブラウザで表示]

ドロップダウンから値を選択すると、選択済みの項目として追加されます。

また選択済みの項目にそれぞれ表示されている×印をクリックすると、その項目の選択が解除されます。