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

.val()でvalueを取得

属性value=の値をアラート表示

<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>

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

.attr()で属性値を取得

属性id=の値をアラート表示

<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>

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

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

属性data-dummyの値をアラート表示

<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>

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

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

属性value=の値をアラート表示

<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>

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

※value値であれば勝手に配列で格納される

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

value値と同様のロジックで取得

表示テキストの値をアラート表示

<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>

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

※値は連結して表示される

配列で取得したい場合はeachで回してpush

表示テキストの値をアラート表示

<select class="piyo3" 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="piyo3-btn">表示テキストの値をアラート表示</a></li>
</ul>

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

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

value値と同様のロジックで取得

属性値をアラート表示

<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>

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

※属性値の場合、最初の選択肢の値しか取得できない

配列で取得したい場合はeachで回してpush

属性値をアラート表示

<select class="piyo5" 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="piyo5-btn">属性値をアラート表示</a></li>
</ul>

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

※表示テキスト同様、値全てを取得するにはeachで回してpush

デモの解説記事に戻る