selectボックスで選択した値の取得方法と、selectボックスを切り替えた時に処理が走るようにする方法の覚え書き。
サンプルHTML
某アイドルオタク感が半端ないですが…楽しく学ぼうプログラミング。
selectボックスの選択した要素の値を取得する
selectボックスの値を取得する場合は、select要素を指定して.val()
でOK。
selectボックスで「おーちゃん」を選択した場合、val = "satoshi"
となる。
このとき、取得される値は”文字列”なので、<option value="数値">
の場合も文字列が取得される。
数値として扱いたい場合はparseInt()
で変換が必要。
selectボックスの選択した要素の表示文字列を取得する
選択した要素の”表示文字列”を取得する場合は、select要素の子要素のうち、選択されている要素を.children(':selected')
で指定し、.text()
で取得する。
selectボックスで「まつゆん」を選択した場合、txt = "まつゆん"
となる。
selectボックスの選択を変更した時に発火させる
.on()
でchangeイベントをセット。selectボックスの選択を変更するたびに処理が動く。
まとめのサンプルコード
上記をまとめたデモ。selectボックスで何かを選ぶと、その値と文字列が表示されるだけのお遊びコード。
スマホでご覧の場合は、「Result」をタップするとデモが表示されます。
See the Pen Memo about Select by さわ (@rily0486) on CodePen.
コメント