この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


Webプログラミング講座初級 第六回 スクリプトでフォーム部品を操作する~プルダウンメニューとリスト編~

  • Webプログラミング講座

今回はプルダウンメニューリスト編です。
プルダウンメニューはともに選択するためのフォームパーツです。
因みにプルダウンメニューリストセレクトボックスと呼ばれることもあります。
都道府県のように選択する項目がたくさんある時に使うと効果的です。
プルダウンメニューとリストはほぼ一緒で、プルダウンメニューの項目を最初から全てオープン(展開)した状態のものがリストとなります。よって使い方もほぼ一緒です。

基本形は以下の通りです。

<select id="example" size="1">
	<option value="A">1</option>
	<option value="B">2</option>
	<option value="C">3</option>
</select>

「size=”1″」と指定するとプルダウンメニューとなり「size=”2″」以上を指定するとリストとなります。単一選択だけではなく複数選択させることもできます。その場合は「multiple=”multiple”」を指定します。Windowsの場合は [ Shift ] または [ Ctrl ] キーを押しながら選択すると複数選択できます。

<select id="example" size="1" multiple="multiple">
    <option value="A">サンプル1</option>
    <option value="B">サンプル2</option>
    <option value="C">サンプル3</option>
</select>

プルダウンメニューとリストは「.val()」も取得と設定ができます。

例えば、先程の例で選択した値を取得したい場合は以下のようにします。
何も選択されていない場合は最初の値を取得します。

$sampleValue = $( ‘#example’ ).val();

また値(AやB)ではなくテキストラベル(選択項目)をの方を取得したい場合は以下のようにします。

$sampleText = $( ‘#example option:selected’ ).text();

「option:selected」を追加してメソッドに「.text()」を追加します。「.val()」ではなく「.text()」がミソです。

次に任意の値(サンプル4)を追加設定する方法です。

$( ‘#example’ ).append( $( ‘<option>’ ).html( ‘サンプル4’ ).val( ‘D’ ) );

「.append()」メソッドで追加して、引数に「.html()」メソッドでオプションタグを追加しています。
おまけとして選択された項目を取り除くときは以下のようにします。

$( ‘#example > option:selected’ ).remove();

さらに全ての項目を取り除くときは以下のようにします。

$( ‘#example > option’ ).remove();

以下はサンプルとなります。

関連記事