如何修改Materialize CSS下拉选择框的选中值显示内容？

要实现这个需求，你需要结合Materialize的组件初始化和JavaScript事件监听，手动替换选中后的显示文本。以下是具体步骤和代码示例：

步骤说明 #

• 给原生<select>添加multiple属性（支持多选场景，单选场景可直接去掉该属性适配）
• 初始化Materialize Select组件
• 监听select的change事件，计算选中选项数量并更新显示文本
• 处理初始加载时的默认状态

完整代码示例 #

HTML部分 #

<div class="input-field col s12">
  <select multiple>
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label>Materialize Select</label>
</div>

JavaScript部分 #

// 初始化Materialize Select组件
document.addEventListener('DOMContentLoaded', function() {
  const elems = document.querySelectorAll('select');
  const instances = M.FormSelect.init(elems);

  // 获取原生select元素
  const selectElem = document.querySelector('select');
  // 获取Materialize生成的显示选中内容的容器
  const selectedTextSpan = document.querySelector('.select-dropdown span.selected');

  // 定义更新显示文本的函数
  function updateSelectedText() {
    const selectedCount = selectElem.selectedOptions.length;
    if (selectedCount === 0) {
      selectedTextSpan.textContent = 'Choose your option';
    } else {
      selectedTextSpan.textContent = `${selectedCount}个选项已选中`;
    }
  }

  // 初始加载时更新一次
  updateSelectedText();

  // 监听select的change事件，实时更新
  selectElem.addEventListener('change', updateSelectedText);
});

关键细节说明 #

• Materialize初始化select后，会生成一个.select-dropdown的下拉触发器，其中的span.selected就是用来显示当前选中内容的元素，我们需要替换这个元素的文本。
• 若为单选场景，只需去掉multiple属性，此时selectedCount在选中后恒为1，文本会固定显示“1个选项已选中”。
• 若页面存在多个select实例，建议给目标select添加ID或专属类名，避免元素选择冲突。

内容的提问来源于stack exchange，提问作者Roderick Latoza