createSelect 

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

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

[p5.js] createSelect

概要

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

書式

createSelect([multiple])
createSelect(existing)

引数

引数名内容備考オプションデフォルト値
multiple複数選択true : 複数選択可
false : 複数選択不可		○false
existing既存のドロップダウンメニュー(選択リスト)

戻値

p5.Elementオブジェクト
(<select"></select>タグの HTMLエレメント)

備考
(ドロップダウンメニューのおもなメソッド)

メソッド内容備考
changed do ... endドロップダウンメニューの状態が変わったときに実行される処理ブロックを記述
option(name, [value])ドロップダウンメニューの選択対象項目を設定
valueドロップダウンメニューで選択中の項目の value属性を取得
selectedドロップダウンメニューで選択中の項目を取得
selected(value)指定した valueの項目を選択状態に設定
disableすべての項目を無効状態に設定
disable(value)指定した valueの項目を無効状態に設定

関連