我需要帮助弄清楚如何使用单击的任何下拉菜单项更改按钮文本。我试着用onclick，但我不知道如何让它发挥作用。我的教授建议使用class属性、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>this
在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>
使用fixed:
在harf中创建函数和调用函数并发送值
<!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>
<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" id="main">
<a href="#" onclick="get_onclick(0)" >Jan</a>
<a href="#" onclick="get_onclick(1)" >Feb</a>
<a href="#" onclick="get_onclick(2)" >Mar</a>
<a href="#" onclick="get_onclick(3)" >Apr</a>
<a href="#" onclick="get_onclick(4)" >May</a>
<a href="#" onclick="get_onclick(5)" >Jun</a>
<a href="#" onclick="get_onclick(6)" >Jul</a>
<a href="#" onclick="get_onclick(7)" >Aug</a>
<a href="#" onclick="get_onclick(8)" >Sep</a>
<a href="#" onclick="get_onclick(9)" >Oct</a>
<a href="#" onclick="get_onclick(10)" >Nov</a>
<a href="#" onclick="get_onclick(11)" >Dec</a>
</div>
</div>
</td>
</tr>
</table>
<script>
let mydiv=document.getElementById('main');
get_onclick = (number) =>
{
document.getElementById("month").innerHTML =mydiv.children[number].textContent;
}
</script>
</body>
</html>