Получение ключа (текста) выбранной опции в HTML5-выделении

Question

Я играю с выбранным полем.Я хочу получить доступ к ключу (отображаемый текст) этого.В настоящее время это работает, но выглядит немного глупо.

<select onChange={
  (e) => {
    console.log('e.target', e.target);
    onChangeEvent(e.target.options[event.target.options.selectedIndex].text, e.target.value);
}}>
  ...
</select>

Есть ли что-то лучше для

e.target.options [event.target.options.selectedIndex] .text

без использования jQuery, дополнительные модули ...

Answer 1

Если вас не волнует IE:

const select = document.querySelector('.select')

select.addEventListener('change', (e) => {
  const selected = e.target.selectedOptions[0]
  console.log(selected.text, selected.value)
})

<select class="select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>