material-design - 如何从 Material for 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}`);
  });
});