MB-Support

パソコン初心者のサポートページ

7.リストボックスの作成 select

 multiple を指定する事で、リスト内の複数の値を選択する事ができます。


リストボックスは、プルダウン形式(select)のメニューに表示件数を指定してリスト化したものです。 複数の文字をプルダウン形式(select)で表示して、クライアントにどれか一つ、または複数を選択させたい場合に使用します。 データを収集する上で、ユニークな文字、文章を入力させたくない場合に重宝します。


・ソース

<select name="A" size="B">
<option value="C" selected>D</option>   
<option value="C">D</option> 
</select>

・実際の表示

実際には <form></form> で囲む必要があるのでソースは以下の様になります。

<form method="" action="">
<select name="A" size="B">
<option value="C" selected>D</option>   
<option value="C">D</option> 
</select>
</form>


name

name="A"
例 name="year" name="color"

フィールドの名前を半角英数字で指定します。この名前がデータを転送する時に重要で、form method でGETを指定した場合、アドレスのファイル名の後ろに付加されます。 基本的にプルダウン形式のメニューを発展させた物なので詳細は 6.プルダウンメニューの作成 select を参照します。



size

size="B"
例 size="2" size="5"

size には、表示させたい option の数を指定します。この指定がなければ、プルダウンメニューと同じです。

・ソース

<form method="" action="">
<select name="name" size="4">
<option value="holmes">holmes</option> 
<option value="watson">watson</option> 
<option value="Mrs. Hudson">Mrs. Hudson</option>
<option value="Irene">Irene</option>
</select>
</form>

・実際の表示


multiple

1つの form 内に複数の select を記述しても、name により value 値を取り出す事が可能です。 さらに select に multiple を記述すると、1つの select 内で複数の option を選択可能になります。複数のリストを選択するには、「ctrl」キーを押しながらマウスの左クリックします。 下のリストでは「holmes」と「Mrs. Hudson」が選択されていると思います。


が・・・一つのリストから複数の値を転送しても、取り出し方が管理人には分かりません。 下は name と名前が付いたリストで、「holmes」と「Mrs. Hudson」の値を GET で送った状態です。

name が重なっているので、普通の方法では後に転送された name の value の値 Mrs. Hudson しか取り出す事ができませんでした。




value

value="B"
例 value="holmes" value=""

value に指定する物は、それぞれのチェックボックスの値になります。例えば性別なら「男」「女」など、転送したい値を指定します。

<option value="holmes">ホームズ</option> 
<option value="watson">ワトソン</option> 


<option>表示する名前</option>

<option></option> の間には、実際に表示する文字を入力します。 もちろん、転送する文字は上で説明した様に value の値なので、表示内容と一緒にする必要はありません。例えば、何らかのシステムをデータベースを使って作成したとします。 ホームズやワトソンなどのユーザー名はデータベースに登録されていて、そのIDだけを使う場合、表示する文字はホームズやワトソンを使いますが、value の値は 1 や 2 を使っても問題ありません。

<option value="holmes">ホームズ</option> 
<option value="watson">ワトソン</option> 

selected

selected が記述された option が、初期状態で選択された事にできます。

<form method="" action="" size="2">
<select name="name">
<option value="holmes">holmes</option> 
<option value="watson" selected>watson</option> 
</select>
</form>

↓初期状態で watson が選択されています。もちろん、クライアントが holems に変更する事ができます。 選択される割合が高いものに selected を入力しておくと便利です。また、cookie を利用して selected の場所を動的に変更させても便利です。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項