Тег HTML <option>не отображает значение метки / имени

Question

    for(let i = 0; i < this.elems.length; i++) {
  document.getElementById('elemsList').innerHTML += ('<option value="'+ this.elems[i].id +' label="' +this.elems[i].name +'"></option>');
}

(он попытался lable = "" и name = "") создает список для фильтрации через текстовое поле. В этом списке отображается большое значение id, а под ним значение метки меньше. при выборе параметра поле заполняется значением идентификатора.

Как мне изменить его, чтобы отображать только значение имени как в списке, так и в поле, но при отправке формы оно относится к доступу значение id?

    for(let i = 0; i < this.elems.length; i++) {
  document.getElementById('elemsList').innerHTML += ('<option value="'+ this.elems[i].id +'>' +this.elems[i].name +'</option>');
}

имеет тот же результат. Я использую Angular, а список представляет собой <data-list>

Редактировать: Вот как выглядит список сейчас. Я хочу, чтобы он просто отображал имя. Но когда форма отправлена, она должна использовать значение id.

В JS я загружаю список следующим образом

  loadElemList() {
for(let i = 0; i < this.elems.length; i++) {
  document.getElementById('elemsList').innerHTML += ('<option value='+ this.elems[i].id +'>' +this.elems[i].name +'</option>');
}
  }

HTML

  <tr><td><label>Elem:</label></td><td>
<input #elem list="elemList" name="elem" />
<datalist id="elems">
</datalist></td></tr>

И форма получает значение из списка с

elem.value

Где elem.value должен быть идентификатором, но пользователь видит только имя.

Answer 1

Я думаю, что вы пропустили "после значения. Попробуйте следующее:

for(let i = 0; i < this.elems.length; i++) {
    document.getElementById('elemsList').innerHTML += ('<option value="' + this.elems[i].id +'" label="' + this.elems[i].name + '"></option>');
}

Это может привести к тому, что вы хотите, извинения, если я неправильно понял вопрос.