Bootstrap5 ドロップダウンメニュー
ドロップダウンメニューは、単一選択のドロップダウンメニューにも、複数選択のドロップダウンメニューにもできます。
単一選択ドロップダウンメニュー：
複数選択ドロップダウンメニュー：
Bootstrap5 のドロップダウンメニュー<select>要素は.form-selectクラスを使用してレンダリングできます:
例
<select class="form-select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
試してみる »
ドロップダウンメニューは.form-select-lg 或 .form-select-smクラスを使用してサイズを変更できます：
例
<select class="form-select form-select-lg">
<select class="form-select">
<select class="form-select form-select-sm">
試してみる »
効果は次の図のとおりです：
disabled属性を使用すると、ドロップダウンメニューが選択されるのを禁止できます：
例
<select class="form-select" disabled>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
試してみる »
データリスト
Bootstrap は datalist タグを使用して `<input>` 要素にドロップダウンメニューを設定することもできます：
次の例では、リストから Web サイトを選択します：
例
<label for="browser" class="form-label">好きな Web サイトを選択してください：</label>
<input class="form-control" list="sites" name="site" id="site">
<datalist id="sites">
<option value="Google">
<option value="サンプル">
<option value="Taobao">
<option value="Wiki">
<option value="Zhihu">
</datalist>
試してみる »
効果は次の図のとおりです：
