Bootstrap ボタン ドロップダウンで選択項目タイトルをエレガントに表示する方法
2024-06-14
Bootstrap ボタン ドロップダウンの選択項目タイトルの表示方法
jQuery を使用する
-
必要なライブラリの読み込み
まず、jQuery と Bootstrap のライブラリをプロジェクトに読み込みます。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> -
選択項目の取得
changeイベントを使用して、ドロップダウンリストで選択された項目を取得します。$(document).ready(function() { $('.dropdown-toggle').on('change', function() { var selectedText = $(this).children('option:selected').text(); $(this).text(selectedText); }); }); -
ボタンテキストの更新
取得した選択項目のテキストを、ボタンのテキストに設定します。
var selectedText = $(this).children('option:selected').text(); $(this).text(selectedText);
JavaScript のみを使用する
-
const dropdownToggle = document.querySelector('.dropdown-toggle'); const selectedOption = dropdownToggle.querySelector('option:checked'); -
dropdownToggle.textContent = selectedOption.textContent;
補足
- 上記のコードは、Bootstrap 5 を使用しています。古いバージョンの Bootstrap を使用している場合は、マイナーな変更が必要になる場合があります。
- ボタンのテキストを更新する代わりに、カスタム HTML 要素を使用して選択項目のタイトルを表示することもできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Bootstrap ボタン ドロップダウン</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row mt-3">
<div class="col-md-6">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ドロップダウン
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">オプション 1</a>
<a class="dropdown-item" href="#">オプション 2</a>
<a class="dropdown-item" href="#">オプション 3</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function() {
$('.dropdown-toggle').on('change', function() {
var selectedText = $(this).children('option:selected').text();
$(this).text(selectedText);
});
});
</script>
</body>
</html>
このコードを実行すると、以下のようになります。
- ページにドロップダウンボタンが表示されます。
- ユーザーがドロップダウンリストからオプションを選択すると、選択したオプションのタイトルがボタンに表示されます。
このサンプルコードを参考に、ご自身のニーズに合わせてカスタマイズしてください。
Bootstrap ボタン ドロップダウンの選択項目タイトル表示：代替方法
この方法は、jQuery を使用せずに、純粋な JavaScript で選択項目タイトルを取得してボタンテキストに設定する方法です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Bootstrap ボタン ドロップダウン</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row mt-3">
<div class="col-md-6">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ドロップダウン
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">オプション 1</a>
<a class="dropdown-item" href="#">オプション 2</a>
<a class="dropdown-item" href="#">オプション 3</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
const dropdownToggle = document.getElementById('dropdownMenuButton');
const selectedOption = dropdownToggle.querySelector('option:checked');
dropdownToggle.textContent = selectedOption.textContent;
</script>
</body>
</html>
data 属性を使用する
この方法は、選択項目のタイトルを data- 属性に格納し、JavaScript で取得する方法です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Bootstrap ボタン ドロップダウン</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row mt-3">
<div class="col-md-6">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-selected-text="オプション 1">
ドロップダウン
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#" data-selected-text="オプション 1">オプション 1</a>
<a class="dropdown-item" href="#" data-selected-text="オプション 2">オプション 2</a>
<a class="dropdown-item" href="#" data-selected-text="オプション 3">オプション 3</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
dropdownToggles.forEach(dropdownToggle => {
const selectedOption = dropdownToggle.querySelector('option:checked');
const selectedText = selectedOption.dataset.selectedText
jquery twitter-bootstrap
