如何使用jQuery移除Material CSS下拉框选项文本的下划线？

由于Materialize的formSelect()会将原生<select>转换为自定义UI组件，直接修改原生选项后必须重新初始化组件，才能让变更同步到前端显示。以下是高效的实现方式：

核心代码实现 #

$(document).ready(function() {
  // 遍历目标下拉框的所有选项，处理文本
  $('#select_id option').each(function() {
    const originalText = $(this).text();
    // 按需求移除下划线及后续内容（示例中select1_1 → select1）
    const processedText = originalText.split('_')[0];
    $(this).text(processedText);
  });

  // 初始化Materialize下拉组件（确保修改后的选项生效）
  $('#select_id').formSelect();
});

变体需求处理 #

如果需要移除所有下划线（而非仅保留下划线前的内容），可以将文本处理逻辑替换为：

const processedText = originalText.replace(/_/g, '');

方案优势 #

• 性能高效：直接操作原生DOM元素，仅遍历一次目标选项
• 组件兼容：严格遵循Materialize组件生命周期，修改后重新初始化确保UI与数据同步
• 精准控制：通过ID指定目标下拉框，避免影响页面其他下拉组件

注意事项 #

• 若选项是异步加载（如通过AJAX从数据库获取），需将文本处理代码放在数据加载完成的回调函数中，再调用formSelect()
• 避免全局选择$('select')，优先使用具体ID或类选择器，减少不必要的DOM操作

内容的提问来源于stack exchange，提问作者Subhanan Ganguli