createSelect

(別名: create_select)

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

p5.jsリファレンス(参考情報)

[p5.js] createSelect

概要

ドロップダウンメニュー(選択リスト)を生成します。

書式

elm = createSelect([multiple])

引数

引数名内容備考オプションデフォルト値
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では対応していません。

関連

HTMLElement 対応表
(p5element).option
(p5element).selected
(p5element).disable
(p5element).enable