在选择时显示选定的下拉项答案

【问题标题】：On select to show the selected dropdown item在选择时显示选定的下拉项
【发布时间】：2020-11-29 21:41:15
【问题描述】：

我有一个带有下拉列表的搜索栏的引导代码，但我想在从下拉列表中选择一个时显示该选项。目前，它显示“全部”，即使您单击下拉菜单并选择它不起作用的任何选项。任何人都使用 JavaScript 或 jQuery 使其工作

<!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>

  <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>

【问题讨论】：

标签： javascript html jquery css bootstrap-4

【解决方案1】：

您可以简单地添加点击事件

dropdown-item

见下文

$('.dropdown-menu .dropdown-item').click(function(){
     var value = $(this).text();
     console.log(value)
     // Update the value and show it to the user
     $(this).parent().parent().find(".dropdown-toggle").html(value);

});

<!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>

  <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>

【讨论】：