Material Components Web Select组件异常：选项始终可见求助

这种情况我之前折腾MDC组件时也踩过一模一样的坑！大概率是因为没有正确初始化组件，或者缺少了必要的样式/脚本依赖，给你梳理几个关键排查步骤：

1. 先确认HTML结构符合MDC规范 #

MDC Select对HTML层级和类名要求很严格，缺了关键结构或类的话，下拉菜单就不会默认隐藏。标准结构应该是这样的：

<div class="mdc-select mdc-select--filled">
  <div class="mdc-select__anchor" role="button" aria-haspopup="listbox" aria-expanded="false" aria-label="选择选项">
    <span class="mdc-select__ripple"></span>
    <span class="mdc-floating-label">选择选项</span>
    <span class="mdc-select__selected-text"></span>
    <span class="mdc-select__dropdown-icon">
      <svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5">
        <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">
      <li class="mdc-list-item mdc-list-item--selected" data-value="" role="option">
        <span class="mdc-list-item__text">请选择</span>
      </li>
      <li class="mdc-list-item" data-value="opt1" role="option">
        <span class="mdc-list-item__text">选项1</span>
      </li>
      <li class="mdc-list-item" data-value="opt2" role="option">
        <span class="mdc-list-item__text">选项2</span>
      </li>
    </ul>
  </div>
</div>

重点要保证下拉菜单容器带有mdc-menu-surface类，这个类是控制菜单默认隐藏的关键。

2. 必须用JS初始化MDC Select组件 #

光写HTML结构完全没用，MDC的交互逻辑全靠JS初始化驱动。你需要在页面加载完成后执行初始化代码：

// 初始化单个select组件
const selectElement = document.querySelector('.mdc-select');
const mdcSelect = new mdc.select.MDCSelect(selectElement);

// 如果页面有多个select，循环初始化
document.querySelectorAll('.mdc-select').forEach(el => {
  new mdc.select.MDCSelect(el);
});

这一步是核心！没有初始化的话，下拉菜单既不会响应点击，也不会触发默认的隐藏/显示逻辑。

3. 检查依赖资源是否完整加载 #

要确保你引入了MDC Select所需的所有CSS和JS资源：

• CSS：必须包含@material/select的样式，以及它依赖的@material/menu、@material/list等基础样式
• JS：必须加载@material/select的脚本，以及依赖的@material/menu、@material/ripple等脚本

如果用CDN引入，要保证所有必要文件都加载成功，比如：

<!-- MDC全局样式 -->
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<!-- MDC全局脚本 -->
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

缺了任何一个依赖，组件的默认样式或交互逻辑都会失效。

4. 排查是否有自定义样式覆盖了默认规则 #

如果上面几步都做了还是有问题，打开浏览器开发者工具，查看.mdc-select__menu元素是否有display: none的默认样式。如果没有，要么是样式没加载成功，要么是你自己写的CSS不小心覆盖了MDC的默认隐藏规则。

你提到的那个示例里的问题，大概率也是因为没初始化组件或者依赖不全，按照上面的步骤排查一遍，应该就能解决啦！

内容的提问来源于stack exchange，提问作者Rob Bauman