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>

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

またドロップダウンに表示されている部分の文字列を取得するには $('#s1 option:selected').text() です。

ドロップダウンの値の設定

続いて値の設定です。

上で記載したドロップダウンの値 (value) をセットするのは、val() メソッドに値を渡して呼び出せば OK です。

$('#s1').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());

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