ドロップダウン選択表示

Bootstrap ボタンのタイトルに選択されたアイテムを表示する方法 (日本語)

jQuery と Twitter Bootstrap を使用して、Bootstrap ボタンのドロップダウンメニューで選択されたアイテムをタイトルに表示する方法について説明します。

HTML コード:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
       選択されたアイテム
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a class="dropdown-item" href="#">アイテム1</a></li>
    <li><a class="dropdown-item" href="#">アイテム2</a></li>
    <li><a class="dropdown-item" href="#">アイテム3</a></li>
  </ul>
</div>

jQuery コード:

$(document).ready(function() {
  $('.dropdown-menu a').click(function(e) {
    e.preventDefault();
    var selectedItem = $(this).text();
    $('.dropdown-toggle').text(selectedItem);
  });
});

解説:

1. HTML
   

   • Bootstrap のドロップダウンメニューをセットアップします。
   • dropdown-toggle クラスを持つボタンがドロップダウンメニューを開きます。
   • dropdown-menu クラスを持つリストがドロップダウンメニューの項目を表示します。

2. jQuery
   

   • document.ready() 関数を使用して、DOM が完全に読み込まれた後、イベントハンドラを登録します。
   • .dropdown-menu a セレクタを使用して、ドロップダウンメニュー内のすべてのリンク要素を取得します。
   • click() イベントハンドラを使用して、リンク要素をクリックしたときの処理を定義します。
   • e.preventDefault() でデフォルトのリンク動作をキャンセルします。
   • 選択されたアイテムのテキストを取得し、selectedItem 変数に保存します。
   • $('.dropdown-toggle').text(selectedItem); で、ドロップダウンボタンのテキストを selectedItem に設定します。

動作:

1. ドロップダウンメニューを開きます。
2. アイテムをクリックします。
3. 選択されたアイテムのテキストがドロップダウンボタンのタイトルに表示されます。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
       選択されたアイテム
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a class="dropdown-item" href="#">アイテム1</a></li>
    <li><a class="dropdown-item" href="#">アイテム2</a></li>
    <li><a class="dropdown-item" href="#">アイテム3</a></li>
  </ul>
</div>

$(document).ready(function() {
  $('.dropdown-menu a').click(function(e) {
    e.preventDefault();
    var selectedItem = $(this).text();
    $('.dropdown-toggle').text(selectedItem);
  });
});

方法 1: data-toggle 属性を使用する

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
       選択されたアイテム
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a class="dropdown-item" href="#" data-toggle="dropdown-title">アイテム1</a></li>
    <li><a class="dropdown-item" href="#" data-toggle="dropdown-title">アイテム2</a></li>
    <li><a class="dropdown-item" href="#" data-toggle="dropdown-title">アイテム3</a></li>
  </ul>
</div>

$(document).ready(function() {
  $('.dropdown-menu a[data-toggle="dropdown-title"]').click(function() {
    var selectedItem = $(this).text();
    $('.dropdown-toggle').text(selectedItem);
  });
});

• jQuery でこの属性を持つリンク要素をクリックしたときに、選択されたアイテムのテキストをドロップダウンボタンのタイトルに設定します。
• ドロップダウンメニューの各アイテムに data-toggle="dropdown-title" 属性を追加します。

方法 2: change イベントを使用する

<div class="dropdown">
  <select class="form-select" id="dropdownSelect">
    <option value="アイテム1">アイテム1</option>
    <option value="アイテム2">アイテム2</option>
    <option value="アイテム3">アイテム3</option>
  </select>
</div>

$(document).ready(function() {
  $('#dropdownSelect').change(function() {
    var selectedItem = $(this).val();
    $('.dropdown-toggle').text(selectedItem);
  });
});

• change イベントを使用して、選択されたオプションの値を取得し、ドロップダウンボタンのタイトルに設定します。
• ドロップダウンメニューを <select> 要素で実装します。

方法 3: Bootstrap 5 の bsCustomToggle イベントを使用する

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
       選択されたアイテム
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a class="dropdown-item" href="#" data-bs-toggle="dropdown-title">アイテム1</a></li>
    <li><a class="dropdown-item" href="#" data-bs-toggle="dropdown-title">アイテム2</a></li>
    <li><a class="dropdown-item" href="#" data-bs-toggle="dropdown-title">アイテム3</a></li>
  </ul>
</div>

$(document).ready(function() {
  $('.dropdown-menu a[data-bs-toggle="dropdown-title"]').click(function() {
    var selectedItem = $(this).text();
    $('.dropdown-toggle').text(selectedItem);
  });
});

• data-bs-toggle="dropdown-title" 属性を持つリンク要素をクリックしたときに、選択されたアイテムのテキストをドロップダウンボタンのタイトルに設定します。
• Bootstrap 5 では、bsCustomToggle イベントを使用して、カスタムのトグル動作を定義できます。