セレクトボックス（ドロップダウンリスト）

フォーム 初級

このコンポーネントについて

セレクトボックス（<select>）は、ドロップダウンリストから1つの選択肢を選ばせるUIコンポーネントです。 都道府県・カテゴリー・並び順の選択など、選択肢が多い場面でラジオボタンより省スペースに収められます。

このページでは、<option> タグによる選択肢の設定方法と、change イベントで選択中の value とテキストをリアルタイムに取得・表示する方法を確認・コピペできます。

  • 選択肢の設定 — <option> タグを <select> 内に並べることで選択肢を定義する。先頭に value="" の「未選択」項目を置くことで初期の未入力状態を表現できる
  • change イベントで値を取得 — 選択が変わるたびに change イベントが発火し、select.value で選択中の value、select.options[select.selectedIndex].text で表示テキストを取得できる
  • 未選択の判定 — value が空文字かどうかを判定することで「未選択」状態を識別できる

実装のポイント・注意点

セレクトボックスで選択された値を取得するには select.value を使います。ただし、これは value 属性の値だけを返すため、画面に表示されているテキストが必要な場合は別途 select.options[select.selectedIndex].text で取得します。selectedIndex は現在選択されている <option> の番号（0始まり）を返すプロパティです。

「未選択」を先頭に置くパターンはよく使われますが、必ず value=""（空文字）を設定しておくことが重要です。こうすることで select.value === '' という判定だけで「まだ選んでいない」状態を検出できます。

アクセシビリティの観点では、<label> タグの for 属性と <select> の id を紐付けると、スクリーンリーダーがラベルを正しく読み上げます。また、aria-live="polite" を結果表示エリアに付与することで、選択変更後の内容が自動で読み上げられます。

デモ

まだ選択されていません

サンプルソース

3つのファイルを同じフォルダに保存し、index.html をブラウザで開くとすぐに動作確認できます。
ファイル名：index.html / style.css / script.js — 保存時の文字コードは UTF-8 を指定してください（Shift-JISだと日本語が文字化けします）。 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>セレクトボックス サンプル</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>

<div class="sl-wrapper">
  <label class="sl-label" for="fruit-select">好きな果物を選んでください</label>

  <!-- select タグ内に option を並べることで選択肢を定義する -->
  <select class="sl-select" id="fruit-select">
    <option value="">未選択</option>      <!-- 先頭は value="" で未選択を表す -->
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
    <option value="orange">オレンジ</option>
    <option value="grape">ぶどう</option>
    <option value="strawberry">いちご</option>
  </select>

  <!-- aria-live="polite" でスクリーンリーダーにも選択変更を伝える -->
  <div class="sl-result" id="sl-result" aria-live="polite">
    <p class="sl-result-placeholder">まだ選択されていません</p>
  </div>
</div>

<script src="./script.js"></script>
</body>
</html>
/* === セレクトボックス サンプル ===
   色を変えたいときは :root の変数を書き換えるだけでOKです */
:root {
  --color-accent:   #2B7FE8; /* フォーカス時の強調色 */
  --color-text:     #1A2332; /* メインテキスト色 */
  --color-border:   #D0D7E0; /* 通常時のボーダー色 */
  --color-bg:       #F4F6F9; /* 背景色 */
  --color-muted:    #9AA5B4; /* プレースホルダー等の薄い文字色 */
}

/* 全体を囲むラッパー */
.sl-wrapper {
  max-width: 360px;
  margin: 40px auto;
  padding: 24px;
  background: var(--color-bg);
  border-radius: 10px;
  font-family: sans-serif;
}

/* ラベル */
.sl-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

/* セレクトボックス本体 */
.sl-select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--color-text);
  background: #fff;
  cursor: pointer;
  font-family: sans-serif;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.sl-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(43, 127, 232, 0.12);
}

/* 結果表示エリア */
.sl-result {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  min-height: 24px;
}
/* 未選択時のプレースホルダー */
.sl-result-placeholder {
  margin: 0;
  color: var(--color-muted);
  font-size: 14px;
}
/* 選択済み: 枠線付きボックスで表示 */
.sl-result.has-value {
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
}
/* value・テキストの各行 */
.sl-result-row {
  margin: 0 0 4px;
}
.sl-result-row:last-child {
  margin: 0;
}

/* スマホ対応 */
@media (max-width: 480px) {
  .sl-wrapper { margin: 24px 16px; }
var select = document.getElementById('fruit-select');
var result = document.getElementById('sl-result');

// セレクトボックスの選択が変わるたびに発火する
select.addEventListener('change', function () {
  // select.value: 選択中の option の value 属性値を取得する
  var value = select.value;

  // select.options[select.selectedIndex].text: 選択中の option の表示テキストを取得する
  // selectedIndex は選択中の option の番号（0 始まり）
  var text = select.options[select.selectedIndex].text;

  if (value === '') {
    // 「未選択」に戻したとき: プレースホルダーを表示する
    result.innerHTML = '<p class="sl-result-placeholder">まだ選択されていません</p>';
    result.className = 'sl-result';
  } else {
    // 選択済み: value と表示テキストをそれぞれ別の行に表示する
    result.innerHTML =
      '<p class="sl-result-row">value: <strong>' + value + '</strong></p>' +
      '<p class="sl-result-row">テキスト: <strong>' + text + '</strong></p>';
    result.className = 'sl-result has-value';
  }
});

AI用プロンプト

以下のプロンプトをコピーしてAIに渡すと、同様のコンポーネントを生成できます。

ChatGPTやClaudeにこのプロンプトを渡すと、同様のコンポーネントをゼロから生成・カスタマイズできます。ライブラリ指定や選択肢の変更など、要件を追記して使うのがおすすめです。

※ このプロンプトを使ってもデモとまったく同じ動作にならない場合があります。AIの解釈や生成タイミングによって差が出ることをご了承ください。

💡 jQuery・Vue・React など特定のライブラリで実装したい場合は、プロンプトの末尾に「〇〇を使って実装してください」と追記してください。

# セレクトボックス（ドロップダウンリスト）作成依頼

## 概要
ドロップダウンリストへの選択肢の設定方法と、選択変更イベントで選択値を取得・表示するフォームを実装してください。

## 要件
- 「好きな果物を選んでください」というラベル付きのセレクトボックスを表示する
- 選択肢の先頭は value="" の「未選択」とし、以下5つの選択肢を設定する
  - りんご（value: apple）
  - バナナ（value: banana）
  - オレンジ（value: orange）
  - ぶどう（value: grape）
  - いちご（value: strawberry）
- 選択を変更するたびに、選択中の value とテキストをセレクトボックスの下に表示する
- 「未選択」に戻したときは「まだ選択されていません」と表示する
- リセットボタンで未選択状態に戻す

## 技術仕様
- HTML / CSS / バニラJavaScript で実装
- 外部ライブラリ：なし
- レスポンシブ対応：必要

## 動作詳細
select 要素の change イベントを使い、select.value で value を、
select.options[select.selectedIndex].text でテキストを取得する。
取得した value とテキストをそれぞれ別の行に表示すること。

## 出力形式
HTML・CSS・JavaScriptを分けて出力してください。
各ファイルは単独でコピー&ペーストして使えるよう記述してください。