尝试获取Bootstrap下拉按钮文本以更改为所选项目

如何解决尝试获取Bootstrap下拉按钮文本以更改为所选项目

我正在使用引导程序来设置下拉按钮的样式，我希望按钮文本更改为从下拉菜单中选择的任何项目。我猜想JavaScript是实现这一目标的最好方法，但我还不那么熟悉。任何帮助将不胜感激。
这是我的第一个下拉按钮的html。谢谢

    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Genre
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <button class="dropdown-item" type="button">Adventure</button>
      <button class="dropdown-item" type="button">Sci-Fi</button>
      <button class="dropdown-item" type="button">Comedy</button>
    </div>

解决方法

@finiteloop感谢您的帮助。根据您指出的方向，我为每个下拉元素添加了一个onclick事件，并添加了以下功能来满足我的需要：

<div class="dropdown mx-3">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Genre
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <button class="dropdown-item" type="button" onclick="showGenre(this)">Adventure</button>
      <button class="dropdown-item" type="button" onclick="showGenre(this)">Sci-Fi</button>
      <button class="dropdown-item" type="button" onclick="showGenre(this)">Comedy</button>
    </div>
  </div>

function showGenre(item) {
  document.getElementById("dropdownMenu1").innerHTML = item.innerHTML;
}

@ MasterShake20，您可以执行以下操作并将其集成到您的代码中：

<!DOCTYPE html>
<html>
<body>

<form>
  Select your favorite fruit:
  <select id="mySelect">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="pineapple">Pineapple</option>
    <option value="banana">Banana</option>
  </select>
</form>

<p>Click the button to change the selected fruit to banana.</p>

<button id="btnTxt" type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  
let buttonVal = document.getElementById("mySelect").value;
document.getElementById('btnTxt').innerHTML = buttonVal;
  
}
</script>

</body>
</html>

在这里查看其工作原理： https://www.w3schools.com/code/tryit.asp?filename=GI7I2WCF1N82

这并非您要尝试做的事情，但这可以使您朝正确的方向前进，并让您了解需要发生的事情。

此外，如果您刚刚起步，那么W3是一个很好的资源，因此请在此处查看其JavaScript教程： https://www.w3schools.com/js/default.asp ：D

尝试获取Bootstrap下拉按钮文本以更改为所选项目

如何解决尝试获取Bootstrap下拉按钮文本以更改为所选项目

解决方法

相关推荐