Making dropdown lists run function-CodePudding

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 >
    <button >Item</button>
    <div  (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

CodePudding user response：

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 >
    <button >Item</button>
    <div >
        <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.

CodePudding user response：

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 >
  <button >Item</button>
  <div >
    <a (click)="selectChange('egg')">Egg</a>
    <a (click)="selectChange('milk')">Milk</a>
  </div>
</div>