def setup
textAlign(CENTER)
background(200)
sel = createSelect
sel.position(10, 10)
sel.option('pear')
sel.option('kiwi')
sel.option('grape')
sel.selected('kiwi')
sel.changed do
item = sel.value
background(200)
text('It is a ' + item + '!', 50, 50)
end
end
def setup
textAlign(CENTER)
background(200)
sel = createSelect
sel.position(10, 10)
sel.option('oil')
sel.option('milk')
sel.option('bread')
sel.disable('milk')
end
def setup
background(200)
sel = createSelect(true) # Ctrl+クリックで複数選択可
sel.position(5, 105).size(40, 90)
sel.option('10')
sel.option('20')
sel.option('30')
sel.option('40')
sel.option('50')
sel.input do
background(200)
textSize(16)
text("合計値 #{sel.selected.map{|x| x.to_i}.sum}", 10, 50)
end
end
ドロップダウンメニュー(選択リスト)を生成します。
| 引数名 | 内容 | 備考 | オプション | デフォルト値 |
|---|---|---|---|---|
| multiple | 複数選択 | true : 複数選択可 false : 複数選択不可 | ○ | false |
elm : p5elementオブジェクト
(<select></select>タグの HTML要素)
・ドロップダウンメニューのおもなメソッドなど
| メソッド | 内容 | 備考 |
|---|---|---|
| changed do ... end | ドロップダウンメニューの状態が変わったときに実行される処理ブロックを記述 | |
| option | ドロップダウンメニューの選択対象項目を設定 | |
| value | ドロップダウンメニューで選択中の項目の value属性を取得 | |
| selected | ドロップダウンメニューで選択中の項目を取得 | |
| selected(value) | 指定した valueの項目を選択状態に設定 | |
| disable | すべての項目を無効状態に設定 | |
| disable(value) | 指定した valueの項目を無効状態に設定 |
・p5.jsでは既存のドロップダウンメニューを引数として指定することができますが、
rbCanvas/p5では対応していません。