时间戳

首页 > 解决方案 > 使用下拉内容中单击选项的值更改 dropbtn 文本

javascript - 使用下拉内容中单击选项的值更改 dropbtn 文本

问题描述

我需要帮助弄清楚如何通过单击任何下拉菜单项来更改按钮文本。我试图使用 onclick，但我不知道如何使它工作。我的教授建议使用类属性、jquery click() 和 attr() 方法。您可以提供的任何建议或提示都会有所帮助。我愿意使用不同类型的下拉菜单，但它必须是滚动而不是显示完整列表的悬停下拉菜单。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  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: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

.force-scroll {

overflow-y: scroll;

height: 200px;

}
</style>
</head>
<script>
</script>
<body>
 <table style="width:25%">
        <tr>
            <td valign= "top">
                <h3 id= "total">Orders for</h3>
        </td>
       <td>
<div class="dropdown force-scroll">
  <button id="month" class="dropbtn">Jan</button>
  <div class="dropdown-content">
    <a class="option" href="#" onclick="selected=Jan">Jan</a>
    <a class="option" href="#" onclick="selected=Feb">Feb</a>
    <a class="option" href="#" onclick="selected=Mar">Mar</a>
    <a class="option" href="#" onclick="selected=Apr">Apr</a>
    <a class="option" href="#" onclick="selected=May">May</a>
    <a class="option" href="#" onclick="selected=Jun">Jun</a>
    <a class="option" href="#" onclick="selected=Jul">Jul</a>
    <a class="option" href="#" onclick="selected=Aug">Aug</a>
    <a class="option" href="#" onclick="selected=Sep">Sep</a>
    <a class="option" href="#" onclick="selected=Oct">Oct</a>
    <a class="option" href="#" onclick="selected=Nov">Nov</a>
    <a class="option" href="#" onclick="selected=Dec">Dec</a>
  </div>
</div>
</td>
 </tr>
        </table>
</body>
</html>

标签： javascripthtmljquerycss

解决方案

这个

在myFunction中，您可以使用this通过单击的元素 textContent 更改按钮的 textContent 。

document.querySelector('.dropbtn').textContent = this.textContent;

事件监听器

我建议不要使用内联脚本，而是为您的按钮使用 eventListeners

.addEventListener('click', myFunction);


// add an event listener to all of your <a> elements
document.querySelectorAll('.option').forEach((x) => {
  x.addEventListener('click', myFunction);
});

function myFunction() {
  document.getElementById('month').textContent = this.textContent;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .dropbtn {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      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: #ddd;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    
    .dropdown:hover .dropbtn {
      background-color: #3e8e41;
    }
    
    .force-scroll {
      overflow-y: scroll;
      height: 200px;
    }
  </style>
</head>
<script>
</script>

<body>
  <table style="width:25%">
    <tr>
      <td valign="top">
        <h3 id="total">Orders for</h3>
      </td>
      <td>
        <div class="dropdown force-scroll">
          <button id="month" class="dropbtn">Jan</button>
          <div class="dropdown-content">
            <a class="option" href="#">Jan</a>
            <a class="option" href="#">Feb</a>
            <a class="option" href="#">Mar</a>
            <a class="option" href="#">Apr</a>
            <a class="option" href="#">May</a>
            <a class="option" href="#">Jun</a>
            <a class="option" href="#">Jul</a>
            <a class="option" href="#">Aug</a>
            <a class="option" href="#">Sep</a>
            <a class="option" href="#">Oct</a>
            <a class="option" href="#">Nov</a>
            <a class="option" href="#">Dec</a>
          </div>
        </div>
      </td>
    </tr>
  </table>
</body>

</html>

推荐阅读