如何在下拉列表中显示所选项目

Question

我的代码如下所示[我正在使用 JQuery 和 Bootstrap 4]：

$('.dropdown-menu li').on('click', function() {
  var getValue = $(this).text();
  $('.dropdown-select').text(getValue);
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="col-auto p-2 col-5">
  <div class="dropdown">
    <button id="dLabel" class="dropdown-select" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Select
        <span class="caret"></span>
     </button>
    <ul class="dropdown-menu" aria-labelledby="dLabel">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
      <li>Option 4</li>
      <li>Option 5</li>
      <li>Option 6</li>
    </ul>
  </div>
</div>

通过单击任何下拉选项，未选择且不显示在其上。

Answer 1

如果我理解正确的话。你需要这样的东西：

1. 创建index.html
2. 创建样式.css
3. 创建dropdown.js

function myFunction() {
  var dropdownMenu = document.getElementById("myDropdown");
  if (dropdownMenu.style.display === "block") {
    dropdownMenu.style.display = "none";
  } else {
    dropdownMenu.style.display = "block";
  }
}

.dropbtn {
  background-color: #000fb7;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.show {
  display: block;
}

<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
  <a href="#yourlink1">Option 1</a>
  <a href="#yourlink2">Option 2</a>
  <a href="#yourlink3">Option 3</a>
</div>

Defer 的意思是——页面解析完成后执行的脚本