如何为Bootstrap构建的UL/LI下拉列表添加onchange事件？

Hey there! Let's break down how to handle selection events for both types of Bootstrap dropdowns you're working with—standard <select> dropdowns styled with Bootstrap, and the UL/LI-based Bootstrap dropdown component.

1. Standard Bootstrap-Styled <select> Dropdown #

Since this is just a native HTML <select> element with Bootstrap classes applied, you can use the native onchange event directly, or hook into it with JavaScript/jQuery.

Example HTML #

<select class="form-select" id="mySelectDropdown">
  <option selected>Choose an option</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Vanilla JavaScript Approach #

Add an event listener to the select element to trigger your logic when the selection changes:

const selectDropdown = document.getElementById('mySelectDropdown');
selectDropdown.addEventListener('change', function(e) {
  const selectedValue = e.target.value;
  const selectedText = e.target.options[e.target.selectedIndex].text;
  
  // Your custom logic here
  console.log(`Selected value: ${selectedValue}, text: ${selectedText}`);
  if (selectedValue === 'option2') {
    // Trigger a specific action for Option 2
    alert('You picked Option 2!');
  }
});

jQuery Approach #

If you're using jQuery in your project, this syntax works too:

$('#mySelectDropdown').on('change', function() {
  const selectedValue = $(this).val();
  const selectedText = $(this).find('option:selected').text();
  
  // Run your desired actions here
  console.log(`Selected: ${selectedText} (${selectedValue})`);
});

2. UL/LI-Based Bootstrap Dropdown Component #

Bootstrap's dropdown component (built with <ul> and <li>) isn't a native form control, so the onchange event doesn't apply here. Instead, you'll listen for click events on the dropdown menu items, then handle the selection accordingly.

Example HTML #

First, set up the standard Bootstrap dropdown structure:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Select an Item
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#" data-value="item1">Item 1</a></li>
    <li><a class="dropdown-item" href="#" data-value="item2">Item 2</a></li>
    <li><a class="dropdown-item" href="#" data-value="item3">Item 3</a></li>
  </ul>
</div>

Vanilla JavaScript Approach #

Listen for clicks on the .dropdown-item elements, update the toggle text, and run your custom logic:

// Get dropdown elements
const dropdownToggle = document.getElementById('dropdownMenuButton');
const dropdownItems = document.querySelectorAll('.dropdown-item');

dropdownItems.forEach(item => {
  item.addEventListener('click', function(e) {
    e.preventDefault(); // Prevent default link behavior
    
    const selectedValue = this.getAttribute('data-value');
    const selectedText = this.textContent;
    
    // Update the dropdown toggle to show the selected item
    dropdownToggle.textContent = selectedText;
    
    // Your custom logic here
    console.log(`Selected item: ${selectedText} (${selectedValue})`);
    if (selectedValue === 'item3') {
      // Trigger a specific action for Item 3
      alert('You selected Item 3!');
    }
    
    // Optional: Add active class to highlight the selected item
    dropdownItems.forEach(i => i.classList.remove('active'));
    this.classList.add('active');
  });
});

jQuery Approach #

Using jQuery for a more concise implementation:

$('.dropdown-item').on('click', function(e) {
  e.preventDefault();
  
  const selectedValue = $(this).data('value');
  const selectedText = $(this).text();
  
  // Update the toggle button text
  $('#dropdownMenuButton').text(selectedText);
  
  // Run your desired actions here
  console.log(`Selected: ${selectedText} (${selectedValue})`);
  
  // Optional: Set active state for the selected item
  $('.dropdown-item').removeClass('active');
  $(this).addClass('active');
});

Key Notes #

• For UL/LI dropdowns, always use e.preventDefault() if your items are <a> tags to avoid unwanted page jumps.
• Using data-value attributes makes it easy to store and retrieve values associated with each dropdown item.
• Adding an active class helps users visually confirm their selection.

内容的提问来源于stack exchange，提问作者Rajendra Mahakali