javascript - 在 Material Design 选择组件上手动触发“更改”事件

Question

我按照此处的说明设置了材料设计选择

<div class="mdc-select mdc-select--filled demo-width-class">
  <div class="mdc-select__anchor"
       role="button"
       aria-haspopup="listbox"
       aria-expanded="false"
       aria-labelledby="demo-label demo-selected-text">
    <span class="mdc-select__ripple"></span>
    <span id="demo-label" class="mdc-floating-label">Pick a Food Group</span>
    <span class="mdc-select__selected-text-container">
      <span id="demo-selected-text" class="mdc-select__selected-text"></span>
    </span>
    <span class="mdc-select__dropdown-icon">
      <svg
          class="mdc-select__dropdown-icon-graphic"
          viewBox="7 10 10 5" focusable="false">
        <polygon
            class="mdc-select__dropdown-icon-inactive"
            stroke="none"
            fill-rule="evenodd"
            points="7 10 12 15 17 10">
        </polygon>
        <polygon
            class="mdc-select__dropdown-icon-active"
            stroke="none"
            fill-rule="evenodd"
            points="7 15 12 10 17 15">
        </polygon>
      </svg>
    </span>
    <span class="mdc-line-ripple"></span>
  </div>

  <div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
    <ul class="mdc-list" role="listbox" aria-label="Food picker listbox">
      <li class="mdc-list-item mdc-list-item--selected" aria-selected="true" data-value="" role="option">
        <span class="mdc-list-item__ripple"></span>
      </li>
      <li class="mdc-list-item" aria-selected="false" data-value="grains" role="option">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">
          Bread, Cereal, Rice, and Pasta
        </span>
      </li>
      <li class="mdc-list-item mdc-list-item--disabled" aria-selected="false" data-value="vegetables" aria-disabled="true" role="option">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">
          Vegetables
        </span>
      </li>
      <li class="mdc-list-item" aria-selected="false" data-value="fruit" role="option">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">
          Fruit
        </span>
      </li>
    </ul>
  </div>
</div>

Javascript 实例化很简单：

import {MDCSelect} from '@material/select';
const select = new MDCSelect(document.querySelector('.mdc-select'));

但我找不到任何有关如何触发更改的文档。

这个问题建议.emit('change')在选择上使用。但这不起作用。

select.emit('change'); // nothing happens

如何在 Material Design 选择组件上手动触发“更改”事件？

标签： javascriptmaterial-components-web

Answer 1

这有效：

select.emit('MDCSelect:change');