如何将下拉按钮文本更改为它的选定项目名称答案

【问题标题】：How to change dropdown button text to it's selected item name如何将下拉按钮文本更改为它的选定项目名称
【发布时间】：2022-09-29 16:19:29
【问题描述】：

我无法找到对我来说足够清楚的答案，所以我在这里：我有一个按钮并将其设置为下拉菜单：

<body>
<div class=\"dropdown\">
    <button onclick=\"changeDropdownVisibility()\" class=\"dropdown-btn\">Dropdown</button>
    <div id=\"i-speed-drp\" class=\"dropdown-content\">
        <a id=\"i-speed-drp-m-s\" value=\"m/s\" onclick=\"changeButtonName(\'i-speed-drp-m-s\', \'m/s\')\">meters per second (m/s)</a>
        <a id=\"i-speed-drp-km-h\" value=\"km/h\" onclick=\"changeButtonName(\'i-speed-drp-km-h\', \'km/h\')\">kilometers per hour (km/h)</a>
    </div>
</div>
</body>

<script>
    function changeButtonName(btnId, btnValue) {
        var btn = document.getElementById(\"i-greitis-dropdown\");
    }
</script>

（我觉得这里不需要css代码，如果需要，请写出来）

我应该在changeButtonName() 函数中添加什么来更改按钮的文本而不更改它的元素文本？

这是哪个按钮？ document.getElementById(\"i-greitis-dropdown\"); 没有具有该 ID 的元素！

标签： javascript html

【解决方案1】：

使用 JavaScript。请注意，传递被单击的元素并从中获取就足够了：

元素值
elem 最近的父级下拉菜单
下拉按钮

function changeButtonName(elem) {
  var dropdown = elem.closest(".dropdown");
  var btn = dropdown.querySelector(".dropdown-btn");
  var btnValue = elem.getAttribute("value")
  btn.innerText = btnValue;
}

<body>
  <div class="dropdown">
    <button onclick="changeDropdownVisibility()" class="dropdown-btn">Dropdown</button>
    <div id="i-speed-drp" class="dropdown-content">
      <a id="i-speed-drp-m-s" value="m/s" onclick="changeButtonName(this)">meters per second (m/s)</a>
      <a id="i-speed-drp-km-h" value="km/h" onclick="changeButtonName(this)">kilometers per hour (km/h)</a>
    </div>
  </div>
</body>

【讨论】：

【解决方案2】：

我已将 <a> 标记更改为 <button> 元素，因为您没有将其用于导航并且 value 属性在 <a> 标记上不存在。

选择这两个按钮并向每个按钮添加一个事件侦听器，以便侦听click 事件。我建议熟悉addEventListener。内联事件处理程序是一项古老的技术，并且有一些缺点。 Read more about events。

将下拉按钮的textContent 值设置为单击按钮的value。

const dropDownButton = document.querySelector('#i-greitis-dropdown');
const buttons = document.querySelectorAll('.dropdown-button');

for (const button of buttons) {
  button.addEventListener('click', event => {
    dropDownButton.textContent = event.target.value;
  });
}

<div class="dropdown">
  <button id="i-greitis-dropdown" class="dropdown-btn">Dropdown</button>
  
  <div id="i-speed-drp" class="dropdown-content">
    <button class="dropdown-button" value="m/s">meters per second (m/s)</button>
    <button class="dropdown-button" value="km/h">kilometers per hour (km/h)</button>
  </div>
</div>

【讨论】：

【解决方案3】：

btn.addEventListener("click", function() {
    document.getElementById("i-greitis-dropdown")
})

我认为这应该有帮助

【讨论】：