求助：实现Bootstrap搜索栏下拉选中项显示功能

Got it, let's sort out this dropdown issue for you. The problem is that your button stays stuck on "All" no matter which option you pick—we just need to add a bit of logic to update the button text when a dropdown item is selected. Since you're already using jQuery for Bootstrap 4, we'll use that for a clean, simple solution.

Here's the modified code that will make the button text update whenever you select a dropdown option:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Search Box With Dropdown List</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
  // Listen for clicks on any dropdown item
  $('.dropdown-item').click(function(e) {
    // Stop the default link behavior (we don't need to navigate to "#")
    e.preventDefault();
    
    // Grab the text of the selected dropdown item
    const selectedCategory = $(this).text();
    
    // Update the dropdown button's text with the selected category
    $(this).closest('.input-group-prepend').find('.dropdown-toggle').text(selectedCategory);
  });
});
</script>
</head>
<body>
<div class="search-box col-md-5">
<form action="">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Category One</a>
<a class="dropdown-item" href="#">Category Two</a>
<a class="dropdown-item" href="#">Category Three</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated Category</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Search input with dropdown button">
<div class="input-group-append">
<button class="btn btn-success" type="button">Search</button>
</div>
</div>
</form>
</div>
</body>
</html>

Breakdown of what's changed: #

• We wrap our code in $(document).ready() to ensure all page elements are loaded before we attach our click listener.
• The $('.dropdown-item').click() function triggers every time a dropdown option is clicked.
• e.preventDefault() stops the browser from trying to navigate to the empty # link (since we only want to update text, not jump anywhere).
• $(this).text() grabs the visible text of the item you clicked (like "Category One").
• $(this).closest('.input-group-prepend').find('.dropdown-toggle') targets the specific dropdown button tied to the clicked item—this works even if you add more dropdowns to your page later.
• Finally, .text(selectedCategory) replaces the button's "All" text with the selected category name.

Now when you click any dropdown option, the button will instantly update to show your selection.

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