jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery の基礎 > jQuery によるドロップダウンリストの操作

jQuery によるドロップダウンリストの操作

ドロップダウンボックスは、HTML によるフォームでの主要な要素です。

HTML のエレメントでいうと <select> です。その中の選択肢は <option> ですね。

決められた選択肢の中からユーザーに何かを選ばせたいときなどは、ドロップダウンボックスが適しています。

またドロップダウンボックスを使うときは、ひとつめの項目を選ばせてから、次の項目を選ばせる・・・というような階層型の操作も必要となる場合もあります。

例えば、[都道府県ドロップダウン] を選ばせてから、その選んだ内容によって [市区町村ドロップダウン] の中身を変えたいなどもよくやる操作ですよね。

ここでは jQuery を用いてドロップダウンリストを使う基本的な方法についてみていきます。

jQuery によるドロップダウンボックスの利用

ではまず、基本的な内容をみていきましょう。まずは値の取得です。

この HTML は次のようになっています。

<select id="s1">
	<option value="HI">Hawaii</option>
	<option value="TX">Texas</option>
	<option value="CA">California</option>
</select>
<button id="b1">Get Value</button>
<button id="b2">Get Text</button>

このドロップダウン (idは "s1") で現在選択された option の値をとるのは $('#s1 option:selected').val() とします。 また表示部分は $('#s1 option:selected').text() です。

$(document).ready( function() {

  $('#b1').click(function(){
    alert( $('#s1 option:selected').val() );
  });
  
  $('#b2').click(function(){
    alert( $('#s1 option:selected').text() );
  });

});

続いて値の設定は次の通り。

この例では HTML 部分は上とほぼ同様で次の通り。

<select id="s2">
	<option value="HI">Hawaii</option>
	<option value="TX">Texas</option>
	<option value="CA">California</option>
</select>
<button id="b3">Set California</button>

値をセットするのは、val() メソッドを使ってドロップダウンの値としてセットすれば OK です。

  $('#b3').click(function(){
    $('#s2').val('CA');
  });

次にイベントハンドラの設定は次の通り。

HTML は次の通り。span (id は "r1") に、ドロップダウンで選択された option の値をセットすることを考えます。

<select id="s3">
	<option value="HI">Hawaii</option>
	<option value="TX">Texas</option>
	<option value="CA">California</option>
</select>
<span id="r1"></span>

change イベントにハンドラとなる関数オブジェクトを渡せば OK です。

  $('#s3').change(function(){
    $('#r1').html($(this).val());
  });

  $('#r1').html($('#s3').val());

一番下の行では初期値を設定しています。

ホーム > jQuery の基礎 > jQuery によるドロップダウンリストの操作
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール

© 2011-2017 Keisuke Oyama jQuery 入門