Bootstrapのセレクトボックス【現役エンジニアが解説】

PROGRAM

今回は、Bootstrapのセレクトボックスについて、簡単に解説していきます。

基本のHTML

Bootstrapではセレクトボックスにform-selectのクラスを付与します。

それ以外はBootstrapを使わない場合と書き方が変わることはありません。

<select class="form-select">
  <option selected>選択してください</option>
  <option value="apple">りんご</option>
  <option value="grape">ぶどう</option>
  <option value="orange">みかん</option>
</select>

上記のコードの例では、果物を選択するセレクトボックスを配置しています。

読み取り専用にする

読み取り専用にするにはdisabled属性を付けます。

残念ながら、readonly属性を使うことはできません。

<select class="form-select" disabled>
  <option>選択してください</option>
  <option value="apple" selected>りんご</option>
  <option value="grape">ぶどう</option>
  <option value="orange">みかん</option>
</select>

上記のコードでは読み取り専用にしていますが、このままではフォーム送信されないため、別にtype属性をhiddenにしたinput要素等を用意する必要があります。

複数選択を可能にする

multiple属性を付与することで複数選択ができます。

これはBootstrapでも同じように実現可能な機能です。

<select class="form-select" multiple>
  <option value="apple" selected>りんご</option>
  <option value="grape">ぶどう</option>
  <option value="orange">みかん</option>
</select>

上記のコードの例では、果物を複数選択可能にしています。