今回は、「selectタグとoptionタグを使ってセレクトボックスを作成する方法」について紹介します。

コーディングで頻出の実装なので、是非参考にしてください。

selectタグとoptionタグとは？

selectタグとは、セレクトボックスを作成する時に使われるタグです。

そして、selectタグの中にセレクトボックスの選択肢が作れるoptionタグを入れます。

optionタグはselectタグの中にいくつ入れても大丈夫です。

プロパティのブラウザ対応状況を確認できる「Can I use」を見てみると、selectタグとoptionタグどちらとも主要ブラウザにしっかり対応しています。

セレクトボックスのサンプル

セレクトボックスのサンプルコードはこちら。

<select name="select">
    <option value="選択1">選択1</option>
    <option value="選択2">選択2</option>
    <option value="選択3">選択3</option>
</select>

選択1選択2選択3

基本的な使い方として、selectタグの中にoptionタグを選択肢の数だけ用意すればOKです。

これで簡単なセレクトボックスが完成します。

そして、下記のコードのようにoptgroupタグを使うことで、選択項目をグループ化して見やすくすることも出来ます。

<select name="country">
    <option value="">行ってみたい国</option>
    <optgroup label="ヨーロッパ">
        <option value="italy">イタリア</option>
        <option value="france">フランス</option>
        <option value="germany">ドイツ</option>
    </optgroup>
</select>

行ってみたい国イタリアフランスドイツ

上記のようにヨーロッパの中でもイタリア、フランス、ドイツのように選択肢をグループ化出来るので見やすくなりました。

 属性について

それではselectタグとoptionタグで使える属性について見ていきましょう！

属性とは、要素に対して何かしらの設定を加えることが出来るものだと理解しておけばOKです。

セレクトボックスに名前をつける【name】

セレクトボックスに名前をつけるにはname属性を使います。

<select name="select">
    <option value="選択1">選択1</option>
    <option value="選択2">選択2</option>
    <option value="選択3">選択3</option>
</select>

選択1選択2選択3

上記だと「select」という名前のセレクトボックスになります。

選択した値をフォームで送信するときに使われます。

デフォルトの選択肢を決める【selected】

selected属性を使うことで、デフォルトの選択肢をあらかじめ決めておくことが出来ます。

<select name="select">
    <option value="選択1">選択1</option>
    <option value="選択2">選択2</option>
    <option value="選択3" selected>選択3</option>
</select>

選択1選択2選択3

selected属性を設定しない場合は、「選択1」の項目が初めに表示されます。

しかし、selected属性を指定することで、デフォルトとして初めに表示したい選択肢を設定することが出来ます。

初期値を空白にする

選択肢の初期値を空白にする場合は、空のoptionタグを用意すればOKです。

<select name="select">
    <option value="">選択してください</option>
    <option value="選択1">選択1</option>
    <option value="選択2">選択2</option>
    <option value="選択3">選択3</option>
</select>

選択してください選択1選択2選択3

そうすることで、ユーザーが何のセレクトボックスなのか理解しやすいので、入れておくことをおすすめします。

選択必須にする【required】

セレクトボックスの選択を必須にするには、required属性をselectタグに指定すればOKです。

<select name="select" required>
    <option value="">選択してください</option>
    <option value="選択1">選択1</option>
    <option value="選択2">選択2</option>
    <option value="選択3">選択3</option>
</select>

選択してください選択1選択2選択3
送信

あくまでブラウザによる簡易的なチェックです。

複数選択できるようにする【multiple】

選択肢を複数選択できるようにするにはmultiple属性をselectタグに指定します。

<select name="select" multiple>
    <option value="選択1">選択1</option>
    <option value="選択2">選択2</option>
    <option value="選択3">選択3</option>
</select>

選択してください選択1選択2選択3

しかし複数選択できるのが見にくく使いにくいので、inputタグで複数選択できるような実装の方がいいと思います。

一度に画面に表示する行数を指定する【size】

セレクトボックスの一度に画面に表示する行数を指定するには、size属性をselectタグに指定します。

<select name="select" size="2">
    <option value="選択1">選択1</option>
    <option value="選択2">選択2</option>
    <option value="選択3">選択3</option>
</select>

選択1選択2選択3

上記の場合だと、size属性に2を指定したので、2行の選択肢が表示されるようになりました。

sizeの数字の部分を変更することで、表示する選択肢を変更することが出来ます。

選択肢を選択できないようにする【disabled】

選択肢を選択できないようにするには、disabled属性をselectタグに指定します。

<select name="select" disabled>
    <option value="選択1">選択1</option>
    <option value="選択2">選択2</option>
    <option value="選択3">選択3</option>
</select>

選択1選択2選択3

正直選択できないセレクトボックスを作る機会はないと思うので、こんな属性があるのかと参考程度に理解しておけばいいです。

セレクトボックスはCSSでデザインを変えることができるのか？

MDNのselectタグでは以下のように書かれています。

<select> 要素は、 CSS を使って生産的にスタイル付けすることが困難です。他の要素のように、特定の側面で影響を与えることはできます。 — 例えば、ボックスモデルや表示されるフォントを操作する、 appearance プロパティを使用してシステムの既定の appearance を削除することができます。
しかし、これらのプロパティはブラウザー間で一貫した結果が得られませんし、異なる種類のフォーム要素を互いに一列に並べたりするのは困難なことです。 <select> 要素の内部構造は複雑で、制御するのは困難です。完全に制御したいのであれば、スタイル付けをするのに優れた機能を備えたライブラリを使用するか、非意味的要素や JavaScript や WAI-ARIA をを使用して独自のドロップダウンメニューを実装することを検討してください。

つまりselectタグを使ってセレクトボックスで個別のスタイルを当てることは難しいということです。

さらにselectタグやopitonタグはブラウザによって表示されるデザインが決まっているので、全てのブラウザでデザインを統一することは大変です。

全体をカスタマイズしたい場合はドロップダウン系のJSライブラリを使うのが良いでしょう。

まとめ

以上が、「selectタグとoptionタグを使ってセレクトボックスを作成する方法」でした。