He adaptado parte del código del tutorial desplegable flotante de W3 y quiero hacerlo de modo que, en lugar de seguir un enlace al hacer clic, pase un valor a una función. A continuación se muestra un fragmento aproximado del código HTML:
<div class="dropdown"> <button class="dropbtn">Item</button> <div class="dropdown-content" (change)="selectChange($event)"> <a value="egg">Egg</a> <a value="milk">Milk</a> </div> </div> Quiero descubrir cómo obtener el valor "egg" en la función JavaScript selectChange si el usuario hace clic en ese cuadro, pero actualmente, no se puede hacer clic en los cuadros y no hacen nada. Me gustaría evitar usar una etiqueta <select> si es posible.
Aquí está el enlace W3 de donde obtuve la estructura de este código: https://www.w3schools.com/howto/howto_css_dropdown.asp
Probablemente la mejor solución
¿Qué tal un eventListener para todos los enlaces en el menú desplegable en Javascript que verifica si se hizo clic en un enlace y luego realiza la función con el valor del elemento en el que se hizo clic?
Probablemente la solución más fácil
O tal vez solo para algunos elementos o si no tiene ganas o no sabe cómo usar un eventListener para esto, siempre podría usar algunos eventos simples de clic con un parámetro.
function selectChange(selected) { //not sure what you want to do now console.log(selected); alert(selected); } .dropbtn { background-color: #04AA6D; 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 span { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content span:hover {background-color: #ddd;} .dropdown:hover .dropdown-content {display: block;} .dropdown:hover .dropbtn {background-color: #3e8e41;} <div class="dropdown"> <button class="dropbtn">Item</button> <div class="dropdown-content"> <span onclick="selectChange('egg')">Egg</span> <span onclick="selectChange('milk')">Milk</span> </div> </div>* En este ejemplo, reemplazó las etiquetas a con span, ya que probablemente no debería usar una etiqueta de anclaje sin un href.
Has etiquetado esto con angular, así que supongo que estás usando ese marco. Si ese es el caso, simplemente use (click)="function()" .
<div class="dropdown"> <button class="dropbtn">Item</button> <div class="dropdown-content"> <a (click)="selectChange('egg')">Egg</a> <a (click)="selectChange('milk')">Milk</a> </div> </div>