Как получить идентификатор выбранной опции из списка dropDown начальной загрузки?

Question

Я построил этот простой список dropDown:

Вот его определение 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)}

Но я не смог найти способ получить идентификатор.
Любая помощь?
Спасибо!

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