如何从引导下拉列表中检索所选选项的ID？

Question

我已经建立了这个简单的下拉列表：

这是它的html定义：

<select class="form-control" id='0' (change)="retrieveValue($event.target)">
      <option id='0'>{{ genericSpecific[params.node.id][0] }}</option>
      <option id='1'>{{ genericSpecific[params.node.id][1] }}</option>
    </select>

要获取值：

  updateChosenValue(event) {
 console.log(event.value)}

但是，我找不到检索ID的方法。
有帮助吗？
谢谢！

Answer 1

尝试一下。这可能有助于您理解逻辑。.但是仍然需要使它与您的角度代码兼容。

    <select onchange="alert(this.options[this.selectedIndex].getAttribute('id'));" name="myname" class="myclass"> 
        <option id="1" value="hi">click1</option>
        <option id="2" value="hello">click2</option>
    </select>

Answer 2

更改HTML

<select class="form-control" id='0' (change)="retrieveValue($event)">
      <option id='0'>A</option>
      <option id='1'>B</option>
    </select>

更新ts

retrieveValue(event) {
     const selectEl = event.target;
     const val = selectEl.options[selectEl.selectedIndex].getAttribute('id');
     console.log(val)
 }

https://stackblitz.com/edit/angular-yfb45a

Answer 3

尝试

<select class="form-control" id='0' (change)="retrieveValue($event.target)">
  <option  id='0' value='0'>{{ genericSpecific[params.node.id][0] }}</option>
  <option id='1' value='1'>{{ genericSpecific[params.node.id][1] }}</option>
</select>

https://stackblitz.com/edit/angular-vo9cuj