如何正确初始化 MDC 下拉列表？

如何解决如何正确初始化 MDC 下拉列表？

我正在尝试在 this 教程中的表单上使用 MDC 下拉菜单。

不幸的是，单击时下拉菜单没有打开。我怀疑 JavaScript 启动可能有问题。有人可以看看我的源代码吗？

来源：

<link href="https://unpkg.com/material-components-web@v5.0.0/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@v5.0.0/dist/material-components-web.min.js"></script>
<link href="style/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

HTML：

<div class="mdc-select mdc-select--outlined">
    <div class="mdc-select__anchor" aria-labelledby="outlined-select-label">
      <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__notch">
          <span id="outlined-select-label" class="mdc-floating-label">Pick a Food Group</span>
        </span>
        <span class="mdc-notched-outline__trailing"></span>
      </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>
    </div>

JavaScript：

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

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