bootstrap 不显示下拉菜单

Question

我有一个添加了下拉列表的 bootstrap 表单。当我点击下拉菜单时，我看到了列表，但是当我点击它时，它并没有显示为 selected，它仍然始终显示“select Domain”。我找到了这个 link

https://www.codeply.com/go/pTWA3jYWEv/bootstrap-bootstrap-dropdown-selected-value

我已经修改了它，但是我遗漏了一些东西，因为它对我不起作用。

<div class="form-group">
<div class="dropdown">
  <button class="btn btn-primary btn-user btn-block dropdown-toggle" type="button"
          id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Select Domain
      <span class="caret"></span>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item">Corp</a>
    <a class="dropdown-item">Domain2</a>
    <a class="dropdown-item">Domain3</a>
    <a class="dropdown-item">Local</a>
  </div>
</div>
</div>


<script type="text/javascript">
$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents('.dropdown').find('.btn btn-primary btn-user btn-block dropdown-toggle').html(selText+' <span class="caret"></span>');
});
</script>

Answer 1

为了使 Bootstrap 下拉菜单正常工作，请将 HTML 文档中的以下 CDN 引用添加到项目中。另外 select ".dropdown-menu a" 以捕获单击的 <a> 元素。下面的解决方案提供了一种简单的方法来在单击下拉按钮时更改 ID 为 dropdown-button 的 <button> 元素的文本。

$(".dropdown-menu a").click( function() {
  console.clear();
  console.log($(this).text());
  
  var selText = $(this).text();
  $('#dropdown-button').html(`${selText} <span class="caret"></span>`)
});

.caret {
  display: inline-block;
  width: 13px;
  height: 13px;
  background-color: lightgray;
}

<!-- Add the following CDN references to the project. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

<div class="form-group">
<div class="dropdown">
  <!-- Added id attribute to this element. -->
  <button id="dropdown-button" class="btn btn-primary btn-user btn-block dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Select Domain
      <span class="caret"></span>
  </button>
  
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item">Corp</a>
    <a class="dropdown-item">Domain2</a>
    <a class="dropdown-item">Domain3</a>
    <a class="dropdown-item">Local</a>
  </div>
</div>
</div>

bootstrap 不显示下拉菜单

bootstrap not showing dropdown

html

javascript

bootstrap-4