iPentec.com / Document / HTML / HTMLタグ / HTML セレクトボックス

セレクトボックスを表示する

HTMLでセレクトボックスを表示するコードを紹介します。

概要

HTMLページで、プルダウンリスト、コンボボックス（ドロップダウンリストタイプ）や選択リストを表示する場合は、selectタグを利用します。

書式

何も指定しない場合はプルダウンリスト表示になります。

<select>
  <option>(項目1の文字列)</option>
  <option>(項目2の文字列)</option>
  .....
  <option>(項目nの文字列)</option>
</select>

リストボックス表示にする場合はsize属性を指定します。

<select size="(ボックスに表示する行数)">
  <option>(項目1の文字列)</option>
  <option>(項目2の文字列)</option>
  .....
  <option>(項目nの文字列)</option>
</select>

リストボックスで複数選択できるようにする場合はmultiple属性を指定します。

<select multiple size="(ボックスに表示する行数)">
  <option>(項目1の文字列)</option>
  <option>(項目2の文字列)</option>
  .....
  <option>(項目nの文字列)</option>
</select>

例1: プルダウン / ドロップダウンボックス表示

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <select id="Select1">
    <option>要素1</option>
    <option>要素2</option>
    <option>要素3</option>
    <option>要素4</option>
    <option>要素5</option>
  </select>
</body>
</html>

解説

seelctタグによるプルダウンリストを作成します。optionタグで項目を記述します。今回の例では要素1～要素5の５つの項目をリストに表示します。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。コンボボックス型のプルダウンリストが表示されます。

コンボボックスをクリックすると、プルダウンのリストが表示されます。リスト中の項目をクリックするとその項目を選択できます。

プルダウンリストが閉じると選択された項目がコンボボックスに表示されます。

例2: リストボックス表示

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <select id="Select1" size="5">
    <option>要素1</option>
    <option>要素2</option>
    <option>要素3</option>
    <option>要素4</option>
    <option>要素5</option>
  </select>
</body>
</html>

解説

seelctタグによるリストボックスを作成します。size属性にリストボックスで表示する行数を指定します。今回の例では5を指定していますので5行分の高さのリストボックスが表示されます。また、optionタグで項目を記述します。今回の例では要素1～要素5の５つの項目をリストに表示します。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

リストボックスの項目をクリックするとクリックした項目を選択できます。

別の項目をクリックすると、選択されていた項目が解除されクリックした項目が選択されます。

例3: 複数選択

セレクトボックスで複数の項目を選択できるようにするコード例です。

コード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <select multiple id="Select1" size="5" >
    <option>要素1</option>
    <option>要素2</option>
    <option>要素3</option>
    <option>要素4</option>
    <option>要素5</option>
  </select>
</body>
</html>