分かりやすく、使いやすく。

複数選択可能なリスト(セレクトボックス)を作成する

スポンサーリンク

HTML で複数選択可能なリスト(セレクトボックス)を作成するには select タグに multiple を付けます。

以下のサンプルコードは、上側のセレクトボックスが複数選択可能で、下側は単一選択しかできません。

html(サンプルコード)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<select id="list1" name="list1" size="5" multiple>
<option value="1">複数選択可能なセレクトボックス・表示する値1</option>
<option value="2">複数選択可能なセレクトボックス・表示する値2</option>
<option value="3">複数選択可能なセレクトボックス・表示する値3</option>
<option value="4">複数選択可能なセレクトボックス・表示する値4</option>
<option value="5">複数選択可能なセレクトボックス・表示する値5</option>
</select>
 
<select id="list2" name="list2" size="5">
<option value="1">単一選択しかできないセレクトボックス・表示する値1</option>
<option value="2">単一選択しかできないセレクトボックス・表示する値2</option>
<option value="3">単一選択しかできないセレクトボックス・表示する値3</option>
<option value="4">単一選択しかできないセレクトボックス・表示する値4</option>
<option value="5">単一選択しかできないセレクトボックス・表示する値5</option>
</select> 

画面上の表示は以下の通りです。複数選択可能なセレクトボックスでは、Ctrl キーまたは Shift キーを押しながらリストをクリックすると複数選択することができます。



スポンサーリンク