How to change dropdown button text to it's selected item name
Question
I haven't been able to find an answer to this that is clear enough for me, so here I am: I have a button and made it as a dropdown menu:
<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>
(I don't think css code is needed here, if so, please, write so)
What do I put in the changeButtonName() function to change the text of the button without it changing the texts of it's elements?
3 answers
solution1
0 2022-09-25 18:47:12
Using javascript. Note it is enough to pass the element that was clicked and from that get:
- elem value
- elem closest parent dropdown
- dropdown btn
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-ms" 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>
solution2
0 2022-09-25 18:48:19
btn.addEventListener("click", function() {
document.getElementById("i-greitis-dropdown")
I think this should help
solution3
0 2022-09-25 18:49:33
I've changed the <a> tags into <button> elements since you're not using it for navigation and the value property doesn't exist on the <a> tag.
Select both buttons and add an event listener to each button where you listen for click events. I'd recommend getting familiar with addEventListener . Inline event handlers are an old piece of tech and have some cons. Read more about events .
Set the textContent value of the dropdown button to the value of the clicked button.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.