Dash㉟(Dropdownコンポーネント/複数選択)

Dropdownのオプション

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

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

Dropdownコンポーネント(複数選択)

Dropdownのオプション multiTrueを設定し複数選択を可能にします。(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) # アプリケーションを起動

[ブラウザで表示]

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

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