【HTML】select・option でプルダウン（選択メニュー）を作る方法｜selected・optgroup・複数選択も解説

Web のフォームで「都道府県を選ぶ」「数量を選ぶ」といったとき、決まった選択肢の中から1つを選んでもらうのに便利なのが <select> 要素（プルダウン、ドロップダウンとも呼びます）です。クリックすると選択肢が一覧で開き、選んだものが入力値になります。この記事では、<select> と <option> の基本から、初期選択を決める selected、選択肢をグループ化する <optgroup>、複数選択できる multiple まで、初心者の方にも分かるよう順を追って解説します。手元の HTML ファイルに貼り付けて動きを確かめながら読み進めてみてください。

select と option の基本

プルダウンは、外側の <select> と、その中に並べる選択肢の <option> の組み合わせで作ります。<select> が枠（メニュー本体）で、その中の <option> 1つ1つが選べる項目です。次の例は、3つの選択肢を持つもっとも基本的なプルダウンです。

<select name="fruit">
  <option value="apple">りんご</option>
  <option value="orange">みかん</option>
  <option value="grape">ぶどう</option>
</select>

ここで大事なのが、画面に表示される文字（タグで囲んだテキスト）と、実際に送信される値（value 属性）は別物だという点です。上の例では「りんご」と表示されますが、フォームを送信したときにサーバーへ届くのは value に書いた apple です。表示は日本語、プログラムで扱う値は半角英数字、というように役割を分けられます。value を省略した場合は、表示しているテキストがそのまま値になります。

主要な属性の一覧

<select> と <option> でよく使う属性を先に一覧で確認しておきましょう。それぞれの詳しい使い方は、このあとの見出しで順に説明します。

selected で初期選択を指定する

何も指定しないと、プルダウンは最初の <option> が初期選択になります。別の項目を最初から選ばれた状態にしたいときは、その <option> に selected を付けます。

<select name="size">
  <option value="s">S</option>
  <option value="m" selected>M</option>  <!-- 最初から M が選ばれる -->
  <option value="l">L</option>
</select>

「選択してください」のようなプレースホルダー（案内文）を最初に置きたいときは、値が空の <option> を先頭に並べるのが定番です。required と組み合わせると、この空の項目のままでは送信できないので「未選択を防ぐ」効果も得られます。

<select name="plan" required>
  <option value="">-- プランを選択 --</option>
  <option value="free">無料プラン</option>
  <option value="pro">有料プラン</option>
</select>

optgroup で選択肢をグループ化する

選択肢が多いときは、<optgroup> で関連する項目をまとめると見やすくなります。label 属性にグループ名を書くと、その見出しがメニュー内に表示されます。見出し自体は選択できず、あくまで分類のためのラベルです。

<select name="drink">
  <optgroup label="コーヒー">
    <option value="espresso">エスプレッソ</option>
    <option value="latte">カフェラテ</option>
  </optgroup>
  <optgroup label="お茶">
    <option value="green">緑茶</option>
    <option value="houji">ほうじ茶</option>
  </optgroup>
</select>

実際に動かして確かめる

ここまでの内容をまとめた動くサンプルです。<label> でラベルを付け、<optgroup> でグループ化し、selected で初期選択を指定しています。プルダウンの選択を変えると、JavaScript の change イベントで選んだ項目名を下に表示します。CSS タブで枠の見た目を整えている点にも注目してください。実際にプルダウンを操作してみましょう。

<form class="order">
  <label for="drink">ドリンクを選ぶ</label>
  <select id="drink" name="drink">
    <option value="">-- 選択してください --</option>
    <optgroup label="コーヒー">
      <option value="espresso">エスプレッソ</option>
      <option value="latte" selected>カフェラテ</option>
      <option value="americano">アメリカーノ</option>
    </optgroup>
    <optgroup label="お茶">
      <option value="green">緑茶</option>
      <option value="houji">ほうじ茶</option>
    </optgroup>
  </select>
  <p class="result">選択中: <span id="out">カフェラテ</span></p>
</form>

.order {
  font-family: sans-serif;
  max-width: 320px;
  margin: 24px auto;
}
.order label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}
.order select {
  width: 100%;
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #aaa;
  border-radius: 6px;
  background: #fff;
}
.result {
  margin-top: 16px;
  color: #007bff;
}

const select = document.getElementById('drink');
const out = document.getElementById('out');

// change イベントで選択が変わるたびに表示を更新する
select.addEventListener('change', () => {
  // 選ばれた option の表示テキストを取り出す
  const label = select.options[select.selectedIndex].text;
  out.textContent = select.value ? label : '（未選択）';
});

multiple と size で複数選択にする

<select> に multiple を付けると、複数の項目を同時に選べるようになります。表示はプルダウンではなくリスト状になり、パソコンでは Ctrl（Mac は Command）キーを押しながらクリックして複数選択します。一度に見える行数は size 属性で調整できます。

<select name="tags[]" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="php">PHP</option>
</select>

複数選択では、選んだ数だけ値が送信されます。PHP など多くのサーバー側の仕組みでは、name を tags[] のように末尾に [] を付けておくと、選ばれた値を配列としてまとめて受け取れます。1つしか選ばせたくない通常のプルダウンでは multiple は付けません。

label と紐づけて使いやすくする

プルダウンが何を選ぶものなのかを示すには、<label> を併用します。<label> の for 属性と <select> の id を同じ値にすると2つが結び付き、ラベルの文字をクリックしてもプルダウンが開くようになります。スクリーンリーダーでも「何の選択肢か」が正しく読み上げられ、アクセシビリティが向上します。

<label for="pref">お住まいの都道府県</label>
<select id="pref" name="pref">
  <option value="tokyo">東京都</option>
  <option value="osaka">大阪府</option>
</select>

選択した値を JavaScript で受け取る

選択された値をその場で使いたいときは、JavaScript で <select> 要素の value プロパティを読みます。選択が変わったタイミングで処理したい場合は、change イベントを使うのが基本です。表示テキストのほうが欲しいときは、selectedIndex（選ばれている位置）を使って options から取り出します。

const select = document.getElementById('pref');

select.addEventListener('change', () => {
  console.log(select.value);                          // 選ばれた option の value
  console.log(select.options[select.selectedIndex].text); // 表示テキスト
});

初期選択や値が思ったとおりにならないとき

selected を付けたのに反映されない

selected は <select> ではなく、初期選択にしたい <option> のほうに付けます。付ける要素を間違えていないか確認してください。また、JavaScript のフレームワークやブラウザの「前回の選択を復元する」挙動によって、HTML に書いた selected が上書きされることもあります。意図どおりにしたいときは、読み込み後に JavaScript で select.value = "m" のように明示的に指定すると確実です。

送信される値がおかしい・空になる

サーバーに届く値が表示テキストと違う、あるいは空になるときは、value 属性の指定を見直します。value を書いていれば必ずその値が送られ、書いていなければ表示テキストが送られます。プレースホルダー用に置いた value="" の項目が選ばれたままだと空文字が送信されるため、required を付けて未選択での送信を防ぐとよいでしょう。なお、値が送信されるのは <select> に name が指定されている場合だけです。name の付け忘れにも注意してください。

option の見た目を細かく変えたい

開いたあとの選択肢一覧（<option> の背景色やフォントなど）は、OS やブラウザが描画する部分が多く、CSS での見た目の調整には限界があります。<select> 自体の枠（余白・枠線・幅など）は CSS で整えられますが、選択肢一覧まで自由にデザインしたい場合は、<ul> とボタンを組み合わせて JavaScript で自作するか、専用のライブラリを使うのが一般的です。

まとめ

プルダウン（選択メニュー）は、<select> の中に <option> を並べて作ります。表示テキストと送信される value は分けて指定でき、selected で初期選択、<optgroup> でグループ化、multiple で複数選択にできます。<label> と for／id で結び付けると使いやすさとアクセシビリティが上がり、required で未選択の送信を防げます。まずは基本の形を作り、必要に応じて属性を足していくのがおすすめです。

各要素・属性の詳しい仕様は、MDN の公式ドキュメントも参考にしてください。

• <select>: 選択肢メニュー要素 – MDN
• <option>: HTML 選択肢要素 – MDN
• <optgroup>: 選択肢グループ要素 – MDN