Dash㉞(Dropdownコンポーネント)

Dropdownコンポーネント

Dropdownコンポーネントは、一覧から値を選択できるコンポーネントです。

選択の方法は単一選択(デフォルト)または複数選択を設定できます。

今回はドロップダウンから値を選択すると、その選択値をドロップダウンの下に表示するアプリケーションを作成します。

[ソースコード]

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
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'
),
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) # アプリケーションを起動

Dropdownコンポーネントは、以下のように設定します。

  1. 引数 optionsに 選択肢の辞書型データのリストを設定
  2. 引数 valueに ドロップダウンの初期値を設定
  3. 引数 styleに ドロップダウンのスタイルを設定

[ブラウザで表示]

ドロップダウンから値を選択するとその value値 が、ドロップダウンの下に表示されることを確認できます。