【jQuery】selectタグの値とテキストを取得・設定・変更する完全ガイド

jQueryでは select タグ（プルダウン）の選択値取得・テキスト取得・オプションの追加/削除・連動プルダウンなど、セレクトボックスに関するあらゆる操作が簡単に実装できます。本記事ではval()・text()・changeイベント・連動プルダウンまで解説します。

1. 選択されている値とテキストの取得

<select id="fruit">
  <option value="apple">リンゴ</option>
  <option value="banana" selected>バナナ</option>
  <option value="orange">オレンジ</option>
</select>

// 選択されている value を取得
var val  = $('#fruit').val();
console.log(val);  // 'banana'

// 選択されている テキスト を取得
var text = $('#fruit option:selected').text();
console.log(text);  // 'バナナ'

// 選択されている option 要素を取得
var $selected = $('#fruit option:selected');

// データ属性も取得できる
var data = $('#fruit option:selected').attr('data-code');

2. changeイベントで選択変更を検知

$(function () {
  $('#fruit').on('change', function () {
    var val  = $(this).val();
    var text = $(this).find('option:selected').text();
    console.log('選択: ' + text + ' (value: ' + val + ')');
  });
});

3. 選択値をプログラムで変更する

// valueで指定して選択
$('#fruit').val('orange');

// 変更後にchangeイベントを手動発火（他の処理と連動させる場合）
$('#fruit').val('orange').trigger('change');

// 最初のオプションを選択（リセット）
$('#fruit').prop('selectedIndex', 0);

// 特定テキストのオプションを選択
$('#fruit option').filter(function () {
  return $(this).text() === 'オレンジ';
}).prop('selected', true);

4. オプションの追加・削除

// オプションを末尾に追加
$('#fruit').append('<option value="grape">ブドウ</option>');

// $()で作成して追加（特殊文字に安全）
var $opt = $('<option>').val('grape').text('ブドウ');
$('#fruit').append($opt);

// 全オプションを削除してから再構成
$('#fruit').empty();
var items = [{ val: 'a', text: 'アイテムA' }, { val: 'b', text: 'アイテムB' }];
$.each(items, function (i, item) {
  $('#fruit').append($('<option>').val(item.val).text(item.text));
});

// 特定オプションを削除
$('#fruit option[value="apple"]').remove();

// 選択中のオプションを削除
$('#fruit option:selected').remove();

5. 連動プルダウンの実装

「都道府県を選択したら市区町村が連動で更新される」パターンの実装例です。

<select id="pref">
  <option value="">都道府県を選択</option>
  <option value="tokyo">東京</option>
  <option value="osaka">大阪</option>
</select>
<select id="city" disabled>
  <option value="">市区町村を選択</option>
</select>

$(function () {
  // 都市データ（実際はAjaxで取得することが多い）
  var cityData = {
    tokyo: ['新宿区', '渋谷区', '港区', '千代田区'],
    osaka: ['北区', '中央区', '天王寺区', '浪速区']
  };

  $('#pref').on('change', function () {
    var prefVal = $(this).val();
    var $city   = $('#city');

    // リセット
    $city.empty().append('<option value="">市区町村を選択</option>');

    if (prefVal && cityData[prefVal]) {
      // 選択肢を追加
      $.each(cityData[prefVal], function (i, name) {
        $city.append($('<option>').val(name).text(name));
      });
      $city.prop('disabled', false);
    } else {
      $city.prop('disabled', true);
    }
  });
});

6. 複数選択selectの操作

<select id="multi" multiple size="4">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
  <option value="3">オプション3</option>
  <option value="4">オプション4</option>
</select>

// 複数選択selectの場合: val()は配列で返る
var selected = $('#multi').val();
console.log(selected);  // ['1', '3'] など

// プログラムで複数選択
$('#multi').val(['1', '3']);

// 選択テキストを全て取得
var texts = $('#multi option:selected').map(function () {
  return $(this).text();
}).get();
console.log(texts);  // ['オプション1', 'オプション3']

まとめ

jQueryでのselectタグ操作は val() で選択値を、option:selected で選択要素を取得するのが基本です。オプションの動的追加には $("").val().text() でjQueryオブジェクトを作成する方法が安全です。連動プルダウンはchangeイベントとempty()の組み合わせで実装できます。

関連記事: jQueryでname属性の値を取得・変更する方法 / jQueryでチェックボックスを操作する方法

よくある質問（FAQ）