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ブラウザで表示します。下図のページが表示されます。コンボボックス型のプルダウンリストが表示されます。
セレクトボックスを表示する:画像1

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

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

例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ブラウザで表示します。下図のページが表示されます。
セレクトボックスを表示する:画像4

リストボックスの項目をクリックするとクリックした項目を選択できます。
セレクトボックスを表示する:画像5

別の項目をクリックすると、選択されていた項目が解除されクリックした項目が選択されます。
セレクトボックスを表示する:画像6

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

解説

seelctタグによるリストボックスを作成します。multiple 属性を追加することで複数の要素を選択できるようにします。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。select タグには size属性も指定されているため、セレクトリストの計上で表示されます。

セレクトボックスを表示する:画像7

選択したい項目をクリックすると、クリックした項目を選択できます。
セレクトボックスを表示する:画像8

[Ctrl]キーを押しながら選択したい項目をクリックすると、複数の要素を選択できます。なお、[Ctrl]キーを押さずに項目をクリックすると、選択状態がすべて解除され、クリックした項目のみが選択された状態になります。
セレクトボックスを表示する:画像9
セレクトボックスを表示する:画像10