JavaScript | HTML / CSS 連携：フォーム基礎 － option

JavaScript JavaScript
スポンサーリンク

option 要素は「select の中の“1つぶんの選択肢”」

<option> は、 「select の中に並ぶ、1 つ 1 つの“選べる候補”」 を表すタグです。

<select> が「選択メニュー全体の箱」だとしたら、 <option> は「その中に並ぶ 1 行 1 行の選択肢」。

ユーザーがどれか 1 つ（または複数）を選ぶとき、 実際に「選ばれる対象」になっているのが option です。

option の基本構造：「見せる文字」と「送る値」を分ける

画面に見えるのは中身、送られるのは value

いちばん基本的な例からいきます。

<select name="plan">
  <option value="basic">ベーシック</option>
  <option value="standard">スタンダード</option>
  <option value="premium">プレミアム</option>
</select>

ここでの関係はこうです。

画面に表示されるのは 「ベーシック」「スタンダード」「プレミアム」というテキスト。

送信されるのは value="basic", value="standard", value="premium" の値。

ユーザーが「スタンダード」を選んで送信すると、 サーバー側にはだいたい plan = "standard" という形で届きます。

重要なのは、「ユーザーに見せるラベル」と「プログラムが扱う値」を分けて考えること。 見せるのは option の中身、扱うのは value。

value をどう設計するか：プログラム目線で考える

人間向けのラベルと、機械向けの値

例えば、都道府県の選択を考えます。

<select name="prefecture">
  <option value="tokyo">東京都</option>
  <option value="chiba">千葉県</option>
  <option value="kanagawa">神奈川県</option>
</select>

ユーザーに見せたいのは「東京都」「千葉県」「神奈川県」。 でも、プログラムとして扱うときは、

"tokyo" "chiba" "kanagawa"

のような、 英字や ID 的な値の方が扱いやすいことが多いです。

もし value を日本語にしてしまうと、

<option value="東京都">東京都</option>

サーバー側で「東京都」という文字列をそのまま扱うことになります。 それでも動きますが、 英字や ID の方が「後から仕様を変えやすい」「多言語対応しやすい」などのメリットがあります。

option の value は「プログラムが扱いやすい形」にする。 中身のテキストは「ユーザーが分かりやすい形」にする。 この分け方が、フォーム設計の質を一段上げてくれます。

selected 属性で「最初に選ばれている option」を決める

初期選択をコントロールする

何も指定しない場合、 最初の option が自動的に選ばれます。

<select name="plan">
  <option value="basic">ベーシック</option>  <!-- これが初期選択 -->
  <option value="standard">スタンダード</option>
  <option value="premium">プレミアム</option>
</select>

特定の option を初期選択にしたいときは、selected を付けます。

<select name="plan">
  <option value="basic">ベーシック</option>
  <option value="standard" selected>スタンダード</option>
  <option value="premium">プレミアム</option>
</select>

この場合、 ページを開いた瞬間に「スタンダード」が選ばれています。

「ユーザーに最初に何を選んでおいてほしいか」を意識して、 selected を付けるかどうかを決める。

「選択してください」用の option と required の組み合わせ

「まだ何も選んでいません」を明示する

ユーザーに必ず選んでほしいとき、 こういう“ダミーの option” をよく使います。

<select name="plan" required>
  <option value="" selected>プランを選択してください</option>
  <option value="basic">ベーシック</option>
  <option value="standard">スタンダード</option>
  <option value="premium">プレミアム</option>
</select>

ここでのポイントは、

最初に選ばれているのは value="" の option required が付いているので、空の value のまま送信しようとするとブラウザが止める

ということです。

ユーザーが「プランを選択してください」のまま送信しようとすると、 ブラウザが「選択してください」と警告してくれます。

「選んでいない状態」を option で表現し、 required と組み合わせて“選ばせる”流れを作る。 これが option を使った UX の基本テクニックです。

JavaScript と option：選択肢を動的に作る・読む

JS で option を追加する

HTML：

<select name="plan" id="plan">
  <option value="" selected>プランを選択してください</option>
</select>

JavaScript：

const select = document.querySelector("#plan");

const plans = [
  { value: "basic", label: "ベーシック" },
  { value: "standard", label: "スタンダード" },
  { value: "premium", label: "プレミアム" },
];

plans.forEach((plan) => {
  const option = document.createElement("option");
  option.value = plan.value;
  option.textContent = plan.label;
  select.appendChild(option);
});
JavaScript

ここでやっているのは、

配列の 1 要素 → 1 つの option value → 送る値 textContent → 表示ラベル

という対応です。

option は「データ構造の 1 要素」を画面上の選択肢に変換する場所。 JS と組み合わせると、データ駆動で選択メニューを作れる。

選ばれている option のラベルを読む

const selectedOption = select.options[select.selectedIndex];
const value = selectedOption.value;
const text = selectedOption.textContent;
JavaScript

select.value だけでも value は取れますが、 「表示ラベルも欲しい」ときは options[selectedIndex] を使います。

disabled な option で「選べない見出し」を作る

グループの見出しとして使う

選択肢が多いとき、 「見出しっぽい option」を置くことがあります。

<select name="category">
  <option value="" selected>カテゴリーを選択してください</option>
  <option value="" disabled>--- 技術 ---</option>
  <option value="frontend">フロントエンド</option>
  <option value="backend">バックエンド</option>
  <option value="" disabled>--- デザイン ---</option>
  <option value="ui">UI デザイン</option>
  <option value="ux">UX デザイン</option>
</select>

disabled を付けた option は選べません。 見た目だけ表示される「区切り・見出し」として使えます。

option は「選べるもの」だけでなく、 「選べない説明的な行」としても使える。 disabled をうまく使うと、select の情報量を整理できる。

option を使うか迷ったときの判断基準

「この 1 行は“選択肢の 1 つ”として意味があるか？」

自分にこう聞いてみてください。

このテキストは、 ユーザーに「選んでもらう候補」の 1 つか？ YES → option

select の中に並べるものは、 基本的に全部 option です。

プラン 都道府県 カテゴリー ステータス

こういった「選択肢の 1 行 1 行」を option として表現していきます。

初心者として「option」で絶対に掴んでほしいこと

<option> は、 「select の中に並ぶ、1 つ 1 つの“選べる候補”」 を表すタグです。

表示ラベルはタグの中身、送信される値は value selected で初期選択を決められる 「選択してください」用のダミー option と required の組み合わせが定番 disabled で「選べない見出し」も作れる JavaScript では document.createElement("option") で動的に追加できる

あなたが option を書くときに、 「この 1 行は“ユーザーに選んでもらう候補”で、 見せる文字とプログラムが扱う値をちゃんと分けて設計するんだよな？」 と意識できていたら、 もう option を“ただの行”ではなく、 “選択メニューの意味とデータ構造をつなぐ重要なピース”として扱えている状態です。

スポンサーリンク
タイトルとURLをコピーしました