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

ドロップダウンリスト(プルダウンリスト)を作成する

スポンサーリンク

HTML でドロップダウンリスト(プルダウンリスト、コンボボックス)を作成するには、select タグと option タグを使用します。

サンプルコードは以下の通りです。

html(サンプルコード)
1
2
3
4
5
6
7
<select id="combo1" name="combo1">
<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> 

画面上には以下のように表示されます。



size 属性を指定すると、プルダウンメニューではなく、リスト表示になります。リスト表示では、size で指定された行数の高さで表示し、残りの部分はスクロールして表示させます。

html(サンプルコード)
1
2
3
4
5
6
7
<select id="combo2" name="combo2" size="3">
<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> 

上記サンプルコードは画面上は以下のように表示されます。



リストを複数選択可能にする場合は multiple 属性を付与します。

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

スポンサーリンク