[英]Change dropbtn text with value of clicked option in the dropdown-content
我需要幫助弄清楚如何通過單擊任何下拉菜單項來更改按鈕文本。 我試圖使用 onclick，但我不知道如何使它工作。 我的教授建議使用 class 屬性、jquery click() 和 attr() 方法。 您可以提供的任何建議或提示都會有所幫助。 我願意使用不同類型的下拉菜單，但它必須是滾動而不是顯示完整列表的 hover 下拉菜單。
<,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>
在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>
使用固定：
在 harf 中創建 function 並調用 function 並發送值
<,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>
如果選擇了文本，然后單擊了下拉選項，則更改所選文本的顏色
[英]If text is selected, and dropdown option is clicked, change color of selected text
如果選擇了帶值的下拉選項，則更改文本，否則不更改文本
[英]if dropdown option with value is selected then change text else do not change text
如何在懸停時將下拉內容放置在左側導航的右側
[英]How to place dropdown-content to the right side of the left-navigation on hover
alter.dropdown-content 格式以適應使用 css 中的 id 的特定按鈕
[英]alter .dropdown-content formatting to fit specific buttons using id in css
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.