使下拉列表运行功能

Question

我改编了W3悬停下拉教程中的一些代码，并希望使其在单击时不遵循链接，而是将值传递给函数。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>

我想弄清楚，如果用户点击了那个框，如何将值"egg"输入JavaScript函数selectChange，但目前，这些框是不可点击的，什么都不做。如果可能的话，我希望避免使用<select>标签。

以下是W3链接，我从中获得了此代码的结构：https://www.w3schools.com/howto/howto_css_dropdown.asp

Answer 1

您已经用angular标记了它，所以我假设您使用的是该框架。如果是这种情况，只需使用(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>

Answer 2

可能是最佳解决方案

在Javascript中，为下拉列表中的所有链接设置一个eventListener，检查是否单击了链接，然后用单击的元素的值执行函数，怎么样？

可能是最简单的解决方案

或者可能只针对几个元素，或者如果您不觉得/不知道如何使用eventListener，则可以始终使用一些带有参数的简单onclick事件。

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>

*在本例中，a将a标记替换为span，因为您可能不应该使用没有href的锚点标记。