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

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>

html（サンプルコード）

<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>

html（サンプルコード）

<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 属性を付与します。

参考：複数選択可能なリスト（セレクトボックス）を作成する

▲このページの一番上に戻る