実行できるHTMLドキュメント: セレクトボックス

Q: HTML でプルダウンを作るにはどうすればいいですか？

選択肢ごとに を 1 つ入れた を使います: Red Blue 。select には name と を付けましょう。

Q: セレクトボックスの初期値を設定するには？

その option に selected を付けます: Blue 。付けなければ最初の option が選ばれます。JavaScript では select.value = 'blue' を設定します。

Q: セレクトボックスにプレースホルダーを付けるには？

最初の option を空にして選べないようにします: Choose a country 。 に required を付けると、本当の選択肢が選ばれるまでフォームを送信できなくなります。

Q: JavaScript でセレクトボックスの選択値を取得するには？

select.value が選択された option の value です。表示されているテキストは select.selectedOptions[0].text で取得し、選択が変わったときに反応するには change イベントを受け取ります。multiple のセレクトボックスでは select.selectedOptions を順に処理します。

Q: select と datalist の違いは何ですか？

ではリストにある選択肢しか選べません。 を付けた は、入力中に候補を出しますが、どんなテキストでも受け付けます。答えが用意した選択肢のどれかでなければならないときは select を使います。

HTML でプルダウンを作る方法

プルダウンのリストは、選択肢ごとに <option> を持つ <select> 要素です。各 option の value がフォームの送る値で、タグの間のテキストが読者に見える部分です。1 つ選んで Submit を押してみてください。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select</title>
</head>
<body>
  <form>
    <label for="lang">Course language</label>
    <select id="lang" name="language">
      <option value="py">Python</option>
      <option value="js" selected>JavaScript</option>
      <option value="java">Java</option>
      <option value="cpp">C++</option>
    </select>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

フォームは language=js を送ります。select の name と、選ばれた option の value です。selected は初期値を決めます。付けなければ最初の option が選ばれます。option に value がなければ、代わりにそのテキストが送られます。

ラベルは for と id で (または囲んで) select とつなぎましょう。ラベルをクリックするとプルダウンにフォーカスが移り、スクリーンリーダーも読み上げます。

select と option の属性

要素	属性	働き
`<select>`	`name`	値を送るときのキー
`<select>`	`required`	空の最初のプレースホルダーではなく、本当の選択肢を選ぶ必要がある
`<select>`	`multiple`	複数の選択肢を選べる
`<select>`	`size`	表示する行数 (リストボックスになる)
`<select>`	`disabled`	プルダウン全体が無効になり、送信もされない
`<option>`	`value`	選ばれたときに送る値
`<option>`	`selected`	ページの読み込み時に選ばれている
`<option>`	`disabled`	表示はされるが選べない
`<optgroup>`	`label`	グループの見出し

required と組み合わせたプレースホルダー

select には常に値があるので、プレースホルダーがないと、読者がプルダウンに一度も触れなくても最初の本当の選択肢が送られてしまいます。最初に空の option を置けばこれを防げ、required を付ければ本当の選択肢が選ばれるまで送信が止まります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Placeholder</title>
</head>
<body>
  <form>
    <label>Country
      <select name="country" required>
        <option value="" disabled selected>Choose a country</option>
        <option value="br">Brazil</option>
        <option value="de">Germany</option>
        <option value="jp">Japan</option>
      </select>
    </label>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

選ぶ前に Continue を押してみてください。ブラウザが送信を拒否し、項目を選ぶよう求めます。プレースホルダーは value="" で、required はこれを空として扱います。また disabled なので、国を選んだ後で再び選ぶことはできません。

optgroup で選択肢をまとめる

<optgroup label="..."> は選択肢の組の上に見出しを付けます。見出しは選べません。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>optgroup</title>
</head>
<body>
  <form>
    <label>Car
      <select name="car">
        <optgroup label="Electric">
          <option value="model3">Model 3</option>
          <option value="ioniq">Ioniq 5</option>
        </optgroup>
        <optgroup label="Hybrid">
          <option value="prius">Prius</option>
          <option value="corolla">Corolla Hybrid</option>
        </optgroup>
      </select>
    </label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

グループは入れ子にできません。リストに付けられる見出しは 1 階層だけです。<optgroup> に disabled を付けると、中の option がすべて無効になります。

複数選択

multiple を付けると読者は複数の選択肢を選べるようになり、プルダウンはリストボックスになります。Ctrl キー (Mac では Cmd キー) を押しながらクリックすると 1 つずつ追加でき、Shift キーを押しながらだと範囲を選べます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple select</title>
</head>
<body>
  <form>
    <label for="skills">Skills</label><br>
    <select id="skills" name="skills" multiple size="5">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="js">JavaScript</option>
      <option value="sql">SQL</option>
      <option value="git">Git</option>
    </select>
    <p><button type="submit">Submit</button></p>
  </form>
</body>
</html>

フォームは skills=html と skills=css を送ります。選んだ option ごとに同じ name が 1 回ずつです。Ctrl を押しながらのクリックを知らない人は多いので、選択肢が数個ならチェックボックスのグループのほうが使いやすいです。

JavaScript で値を読み書きする

select.value で選ばれた option の値を読み書きでき、読者が別の option を選ぶと change イベントが発生します。よくある使い方は、1 つ目のプルダウンに応じて選択肢が変わる 2 つ目のプルダウンです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dependent dropdowns</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Country
      <select name="country" id="country">
        <option value="fr">France</option>
        <option value="it">Italy</option>
      </select>
    </label>
    <label>City <select name="city" id="city"></select></label>
    <button type="submit">Submit</button>
  </form>
  <p id="out"></p>

  <script>
    const cities = { fr: ['Paris', 'Lyon', 'Nice'], it: ['Rome', 'Milan'] };
    const country = document.querySelector('#country');
    const city = document.querySelector('#city');

    const fill = () => {
      city.replaceChildren(...cities[country.value].map((name) => new Option(name, name.toLowerCase())));
    };
    const show = () => {
      document.querySelector('#out').textContent =
        'value: ' + city.value + ', text: ' + city.selectedOptions[0].text;
    };

    country.addEventListener('change', () => { fill(); show(); });
    city.addEventListener('change', show);
    fill();
    show();
  </script>
</body>
</html>

new Option(text, value) で option を作ります。select.selectedIndex は選ばれた option の位置で、select.selectedOptions は選ばれた option の一覧です。multiple のセレクトボックスはこれで読みます。

セレクトボックスのデザイン

プルダウンの開いたリストはブラウザと OS が描くので、スタイルを付けられる部分はわずかです。閉じた箱のほうは変えられます。appearance: none で標準の矢印を消し、背景画像で自分の矢印を置きます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled select</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .styled {
      appearance: none;
      font: inherit;
      padding: 8px 36px 8px 12px;
      border: 2px solid #9ca3af;
      border-radius: 8px;
      background-color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111827' stroke-width='2'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      color: #111827;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
  </style>
</head>
<body>
  <label>Default <select><option>Option one</option><option>Option two</option></select></label>
  <br><br>
  <label>Styled
    <select class="styled">
      <option>Option one</option>
      <option>Option two</option>
    </select>
  </label>
</body>
</html>

終わり側の padding を広くして矢印の場所を空けているので、長い選択肢のテキストが矢印の下に潜り込みません。ここでもボタンと同じく font: inherit が大事です。select は初期状態でブラウザの小さなフォームのフォントを使います。開いたリストの option は標準の見た目のままです。Chrome では appearance: base-select を指定すれば開いたリストにもスタイルを付けられ、対応していないブラウザは標準のリストを表示します。どのブラウザでも完全に制御するには ARIA で独自のウィジェットを作る必要があり、正しく作るのは見た目よりずっと大変です。

select、ラジオボタン、datalist の使い分け

使うもの	使う場面
`<select>`	長いリストから 1 つを選ぶとき、または場所が狭いとき
ラジオボタン	すべて見えているべき少数の選択肢から 1 つを選ぶ (HTML のラジオボタンを参照)
`<input>` と `<datalist>`	候補は出すが、入力された値は何でも受け付ける

よくある間違い

必須の選択にプレースホルダーがない。 読者が選んでいなくても最初の本当の選択肢が送られます。
プレースホルダーに value="none" のような本物の値を付ける。 required はそれを有効な選択として扱います。value="" を使いましょう。
テキストが長いときや翻訳されるときに option に value を付けない。 サーバーは表示されたテキストを受け取るので、言語によって値が変わってしまいます。
少数の選択肢に multiple を使う。 チェックボックスのほうが使いやすいです。
option の click を受け取る。 <select> の change を使いましょう。キーボードでの変更でも発生します。
ラベルがない。 プレースホルダーしかない select は、選択肢を選んだ時点で名前がなくなります。

よくある質問

HTML でプルダウンを作るにはどうすればいいですか？

選択肢ごとに <option> を 1 つ入れた <select> を使います: <select name="color"><option value="red">Red</option><option value="blue">Blue</option></select>。select には name と <label> を付けましょう。

セレクトボックスの初期値を設定するには？

その option に selected を付けます: <option value="blue" selected>Blue</option>。付けなければ最初の option が選ばれます。JavaScript では select.value = 'blue' を設定します。

セレクトボックスにプレースホルダーを付けるには？

最初の option を空にして選べないようにします: <option value="" disabled selected>Choose a country</option>。<select> に required を付けると、本当の選択肢が選ばれるまでフォームを送信できなくなります。

JavaScript でセレクトボックスの選択値を取得するには？

select.value が選択された option の value です。表示されているテキストは select.selectedOptions[0].text で取得し、選択が変わったときに反応するには change イベントを受け取ります。multiple のセレクトボックスでは select.selectedOptions を順に処理します。

select と datalist の違いは何ですか？

<select> ではリストにある選択肢しか選べません。<datalist> を付けた <input> は、入力中に候補を出しますが、どんなテキストでも受け付けます。答えが用意した選択肢のどれかでなければならないときは select を使います。