jQuery selectタグで選択された値とテキストの取得方法

単一要素の取得方法です。値は .val() テキストは .text() に option:selected を指定します。

<select name="single">
  <option value="hoge">ほげ</option>
  <option value="piyo">ぴよ</option>
  <option value="fuga">ふが</option>
  <option value="saka">さか</option>
</select>

$('[name=single]').change(function() {
  // 選択された値を取得する
  var value = $('[name=single]').val();
  console.log(value); // 出力：hoge
  // 選択された表示文字列を取得する
  var text = $('[name=single] option:selected').text();
  console.log(text); // 出力：ほげ
});

selectタグにmultiple属性が指定された複数要素を取得する方法です。

単一要素と同じ取得方法では、表示文字列はすべて連結されて1つの文字列として取得されてしまいます。そこでeachを使用して配列にpushします。

<select name="multi" multiple='multiple'>
  <option value="hoge">ほげ</option>
  <option value="piyo">ぴよ</option>
  <option value="fuga">ふが</option>
  <option value="saka">さか</option>
</select>

$('[name=multi]').change(function() {
  // 複数選択された値を取得する
  var value = $('[name=multi]').val();
  console.log(value); // 出力：['hoge', 'piyo']
  // 複数選択された示文字列を取得する
  var text = $('[name=multi] option:selected').text();
  console.log(text); // 出力：ほげぴよ
  // 複数選択された表示文字列を配列で取得する
  var array = [];
  $('[name=multi] option:selected').each(function() {
    array.push($(this).text());
  });
  console.log(array); // 出力：["ほげ", "ぴよ"]
});

ふむ、いい感じ。

jQueryでselectタグにて選択された値とテキストの取得方法を紹介しました。

表示文字列の取得方法って、結構な頻度で使うんだけど、いつも忘れちゃうんですよね。特にmultiple属性が指定されている場合とか、いつもアレ？ってなる。

筆者と同じ忘れん坊さんも、このサイトに書いてあるってことだけは覚えておいてくださいねｗ