I have adapted some code from the W3 hoverable dropdown tutorial and want to make it so that rather than following a link when clicked, it passes a value to a function. A rough snippet of the HTML code is below:
<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>
I want to figure out how to get the value "egg" into the JavaScript function selectChange if the user clicks on that box, but currently, the boxes are not clickable and don't do anything. I would like to avoid using a <select> tag if possible.
Here is the W3 link I got the structure of this code from: https://www.w3schools.com/howto/howto_css_dropdown.asp
Probably the best solution
How about an eventListener to all the links in the dropdown in Javascript that checks if when a link was clicked and then performs the function with the value of the element that was clicked?
Probably the easiest solution
Or maybe for just a few elements or if you don't feel like/don't know how to use an eventListener for this could always use some simple onclick events with a parameter.
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>*In this example a replaced the a-tags with span as you probably shouldn't use an anchor-tag without a href.
You've tagged this with angular, so I'm assuming you're using that framework. If that's the case, just 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>