HTML: Все еще невозможно выбрать атрибут данных из списка данных?

Question

Я пробовал несколько подходов, чтобы получить атрибуты данных выбранного элемента (data-id, data-key), но, похоже, ничего не работает.

В паре источников упоминается, что это невозможно специально для datalist ...

Есть ли способ достичь этого сейчас или это все еще невозможно?

Я очень ценю ванильный Javascript.

document
  .getElementById('input-journal-item-company')
  .addEventListener("change", (e) => {
    console.log(e.target.dataset) // Empty object DOMStringMap {}
    console.log(e.target.dataset.id) // undefined
    console.log(e.target.getAttribute("data-id")) // null
  })

<input type="text" id="input-journal-item-company" list="input-companies">
<datalist id="input-companies">
    <option data-id="1" data-key="001" value="Company 1">Company 1</option>
    <option data-id="2" data-key="002" value="Company 2">Company 2</option>
    <option data-id="3" data-key="003" value="Company 3">Company 3</option>
</datalist>

Answer 1

e.target - это значение input, а не option, из которого получено значение.Вам необходимо найти соответствующую опцию.

document
  .getElementById('input-journal-item-company')
  .addEventListener("change", (e) => {
    const option = document.querySelector(`#${e.target.list.id} option[value='${e.target.value}']`);
    console.log(option.dataset) // Empty object DOMStringMap {}
    console.log(option.dataset.id) // undefined
    console.log(option.getAttribute("data-id")) // null
  })

<input type="text" id="input-journal-item-company" list="input-companies">
<datalist id="input-companies">
    <option data-id="1" data-key="001" value="Company 1">Company 1</option>
    <option data-id="2" data-key="002" value="Company 2">Company 2</option>
    <option data-id="3" data-key="003" value="Company 3">Company 3</option>
</datalist>

Answer 2

Попробуйте это для своего JavaScript:

document
  .getElementById('input-journal-item-company')
  .addEventListener("change", (e) => {
    const listOption = e.target.list.querySelector('[value="' + e.target.value + '"]');
    console.log(listOption.dataset.id);
    console.log(listOption.dataset.key);
  })

Ключевым моментом здесь является то, что мы используем e.target.list, чтобы получить ссылку на привязанный элемент <datalist>, чтобы сделать элемент ввода, который фактически изменяется.Оттуда мы можем запросить его дочерние элементы с querySelector для того, у которого есть значение, которое соответствует значению элемента ввода.

http://jsfiddle.net/eboc9yzj/