【jQuery】selectボックスの選択した要素を取得する

selectボックスで選択した値の取得方法と、selectボックスを切り替えた時に処理が走るようにする方法の覚え書き。

サンプルHTML

某アイドルオタク感が半端ないですが…楽しく学ぼうプログラミング。

<select name="ars">
    <option value="satoshi">おーちゃん</option>
    <option value="sho">しょーちゃん</option>
    <option value="masaki">まーくん</option>
    <option value="kazunari">かずくん</option>
    <option value="jun">まつゆん</option>
  </select>

selectボックスの選択した要素の値を取得する

let val = $('select[name=ars]').val();

selectボックスの値を取得する場合は、select要素を指定して.val()でOK。

selectボックスで「おーちゃん」を選択した場合、val = "satoshi" となる。

このとき、取得される値は”文字列”なので、<option value="数値">の場合も文字列が取得される。

数値として扱いたい場合はparseInt()で変換が必要。

selectボックスの選択した要素の表示文字列を取得する

let txt = $('select[name=ars]').children(':selected').text();

選択した要素の”表示文字列”を取得する場合は、select要素の子要素のうち、選択されている要素を.children(':selected')で指定し、.text()で取得する。

selectボックスで「まつゆん」を選択した場合、txt = "まつゆん"となる。

selectボックスの選択を変更した時に発火させる

$('select[name=ars]').on('change',()=>{
  //ここに処理を書く
})

.on()でchangeイベントをセット。selectボックスの選択を変更するたびに処理が動く。

まとめのサンプルコード

上記をまとめたデモ。selectボックスで何かを選ぶと、その値と文字列が表示されるだけのお遊びコード。

スマホでご覧の場合は、「Result」をタップするとデモが表示されます。

See the Pen Memo about Select by さわ (@rily0486) on CodePen.

さわ

webエンジニア

X

webサイト制作をメインとして、フロントからインフラまで広くかじっているIT屋さんをやっています