Question

这适用于单击value2时调用方法hhh（）

 <select name="select">
    <option value="value1">Value 1</option>
    <option value="value2" (click)="hhh()">Value 2</option>
    <option value="value3">Value 3</option>
  </select>

这不会调用click事件

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option (click)="hhh()" value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

如何在datalist中获得点击事件（甚至更好的选择元素的事件）？

Answer 1

数据列表与select不是100％相同，您需要将(change)/(click)添加到输入字段。但它可能不是你追求的100％。

选择您的项目。
使用按钮，按键（Enter）或将焦点保留在该字段上提交您的项目。

它是这样的：

<强> *。component.html

<input list="browsers" name="myBrowser" (change)="onSortChange($event)">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Internet Explorer">
    <option value="Opera">
    <option value="Safari">
    <option value="Microsoft Edge">
</datalist>

<强> *。component.ts

onSortChange(e) {
   this.sort(e.target.value);
}


sort(field: string) {
    switch (field) {
        case 'value1':

        break;
        case 'value2':

        break;
        case 'value3':

        break;
        default:
        break;
    }
}

否则，您需要实现自己的Javascript函数，如this。

Angular对单击/选择datalist选项元素做出反应

1 个答案: