如何从用于Web选择的组件中获取输入文本（而不仅仅是值）？

Question

在文档中，它指定如何获取索引和数据值，而不是输入文本：

import {MDCSelect} from '@material/select';

const select = new MDCSelect(document.querySelector('.mdc-select'));

select.listen('MDCSelect:change', () => {
  alert(`Selected option at index ${select.selectedIndex} with value "${select.value}"`);
});

Answer 1

以下假设您有多个要发起的MDCSelect

import {MDCSelect} from '@material/select';

const selectElements = [].slice.call(document.querySelectorAll('.mdc-select'));

selectElements.forEach((selectEl) => {
  const select = new MDCSelect(selectEl);

  select.listen('MDCSelect:change', (el) => {
    const elText = el.target.querySelector(`[data-value="${select.value}"`).innerText;
    console.log(`Selected option at index ${select.selectedIndex} with value "${select.value}" with a label of ${elText}`);
  });
});