【意外と知らない】選択済みのセレクトボックスの値を取得する色々な方法

Web2018年5月14日

選択済みのセレクトボックスの属性値を取得する際、value値は$('select').val()で取れますが、他の属性値はoption:selectedで取り出す必要があります。備忘録も兼ねて本記事では、セレクトボックスの属性値を取得する方法について色々まとめてみました。

サンプルコード

.val()でvalueを取得

selectタグに対してval();で簡単に選択済みの値を取得できます。

HTML

<select class="hoge">
<option value="value-a">選択肢1</option>
<option value="value-b">選択肢2</option>
<option value="value-c">選択肢3</option>
<option value="value-d">選択肢4</option>
<option value="value-e">選択肢5</option>
</select>

<ul class="list-link-01">
<li><a href="#" class="hoge-btn">属性value=の値をアラート表示</a></li>
</ul>

js

$('a.hoge-btn').click(function(){
  var $hoge = $('select.hoge').val();
  alert($hoge);
  return false;
});

※jQueryを読み込んでいる場合のスクリプトとなります

.attr()で属性値を取得

属性値はoption:selectedで選択済みの選択肢を指定し、attr();で値を取得できます。

HTML

<select class="moge">
<option id="dummy-a">データa</option>
<option id="dummy-b">データb</option>
<option id="dummy-c">データc</option>
<option id="dummy-d">データd</option>
<option id="dummy-e">データe</option>
</select>

<ul class="list-link-01">
<li><a href="#" class="moge-btn">属性id=の値をアラート表示</a></li>
</ul>

js

$('a.moge-btn').click(function(){
  var $moge = $('select.moge option:selected').attr('id');
  alert($moge);
  return false;
});

dataの属性であれば.data()でも取得可能

data属性であれば、data();でも取得できます。

HTML

<select class="fuga">
<option data-dummy="data1">データ1</option>
<option data-dummy="data2">データ2</option>
<option data-dummy="data3">データ3</option>
<option data-dummy="data4">データ4</option>
<option data-dummy="data5">データ5</option>
</select>

<ul class="list-link-01">
<li><a href="#" class="fuga-btn">属性data-dummyの値をアラート表示</a></li>
</ul>

js

$('a.fuga-btn').click(function(){
  var $fuga = $('select.fuga option:selected').data('dummy');
  alert($fuga);
  return false;
});

複数選択（multiple属性を使用）している場合のvalue値

multiple属性を付与したセレクトボックスの場合、若干取得したい値によって挙動が異なるので注意が必要です。

まず、value値の場合は単一の選択肢同様の処理で取得すると、勝手に配列に格納されます。以下のサンプルコードを実行すると、選択した値はすべてカンマ区切りで表示されます。

HTML

<select class="piyo" multiple="multiple">
<option value="value-a">選択肢1</option>
<option value="value-b">選択肢2</option>
<option value="value-c">選択肢3</option>
<option value="value-d">選択肢4</option>
<option value="value-e">選択肢5</option>
</select>

<ul class="list-link-01">
<li><a href="#" class="piyo-btn">属性value=の値をアラート表示</a></li>
</ul>

js

$('a.piyo-btn').click(function(){
  var $piyo = $('select.piyo').val();
  alert($piyo);
  return false;
});

複数選択（multiple属性を使用）している場合の表示テキスト

表示テキストをすべて取得する場合、value値と同じ実装をすると若干挙動が異なります。

HTML

<select class="piyo2" multiple="multiple">
<option value="value-a">選択肢1</option>
<option value="value-b">選択肢2</option>
<option value="value-c">選択肢3</option>
<option value="value-d">選択肢4</option>
<option value="value-e">選択肢5</option>
</select>

<ul class="list-link-01">
<li><a href="#" class="piyo2-btn">表示テキストの値をアラート表示</a></li>
</ul>

js

以下のようにvalue値と同様のロジックで実装すると、全ての値が連結されて取得されます。

※value値のように勝手に配列に格納されない

$('a.piyo2-btn').click(function(){
  var $piyo2 = $('select.piyo2 option:selected').text();
  alert($piyo2);
  return false;
});

選択した値をvalue値同様配列化するには、eachで回して用意した変数にpushする必要があります。

$('a.piyo2-btn').click(function(){
  var $arr = [];
  $('select.piyo2 option:selected').each(function() {
    var $piyo2 = $(this).text();
    $arr.push($piyo2);
  });
  alert($arr);
  return false;
});

これでvalue値同様、アラートするとカンマ区切りで表示されます。

複数選択（multiple属性を使用）している場合の属性値

属性値の場合はこれまた微妙に挙動が異なります。

HTML

<select class="piyo4" multiple="multiple">
<option id="dummy-a">データa</option>
<option id="dummy-b">データb</option>
<option id="dummy-c">データc</option>
<option id="dummy-d">データd</option>
<option id="dummy-e">データe</option>
</select>

<ul class="list-link-01">
<li><a href="#" class="piyo4-btn">属性値をアラート表示</a></li>
</ul>

js

value値と同様のロジックで実装すると、選択した最初の値しか取得できません。

$('a.piyo4-btn').click(function(){
  var $piyo4 = $('select.piyo4 option:selected').attr('id');
  alert($piyo4);
  return false;
});

表示テキスト同様、選択した値全てを取得するにはeachで回して配列にpushする必要があります。

$('a.piyo4-btn').click(function(){
  var $arr = [];
  $('select.piyo4 option:selected').each(function() {
    var $piyo4 = $(this).attr('id');
    $arr.push($piyo4);
  });
  alert($arr);
  return false;
});

デモ

実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。

選択済みのセレクトボックスの属性を取得する色々な方法

まとめ

まとめると、以下のポイントに注意して実装するとよいです。

value値はselectタグに対してval();で取得
属性値や表示テキストはoption:selectedで指定して取得
複数選択におけるvalue値は勝手に配列に格納される
複数選択におけるvalue値以外の取得はeachを回して配列にpush

選択済みの値を取得するという簡単な実装ではありますが、掘り下げると結構細かい挙動の違いが発見できたりして面白いですね。こういった挙動を覚えておくと予期せぬバグの回避につながるので、どうぞご参考になれば幸いです。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。