Materialize CSS多选输入框选中值重复显示及占位符未消失问题求助

看起来你遇到的是Materialize CSS多选组件在动态生成选项时的常见渲染冲突问题，我来帮你一步步解决这两个核心问题：

问题根源分析 #

1. 选中值重复显示：你通过JS动态添加了默认占位选项（"Choose your option"）并设置了defaultSelected，而Materialize的formSelect组件在渲染多选框时，会同时处理原生select的选项状态和自己生成的UI标签，这个默认选中的空选项会干扰组件的选中状态判断，导致重复渲染已选值。
2. 占位符未消失：动态添加的禁用默认选项被标记为defaultSelected，即使你选中了其他选项，Materialize仍会认为存在"默认选中"的空选项，因此不会触发占位符（或label）的浮动隐藏逻辑。

解决方案：简化默认占位逻辑+正确初始化组件 #

我们可以通过移除多余的动态占位选项，改用Materialize原生的label作为占位符，同时优化动态选项的添加和组件初始化流程，彻底解决这两个问题：

1. 调整HTML结构

保留最简洁的select和label，不需要手动添加空占位选项：

<div class="row">
  <div class="input-field col s12">
    <select id="co_morbid_conditions" required aria-required="true" multiple></select>
    <label for="co_morbid_conditions">Co-morbid Conditions *</label>
  </div>
</div>

2. 优化JS逻辑

移除动态添加的空占位选项，直接添加业务选项，然后正确初始化formSelect，同时监听选中事件确保label状态正确：

var comorbid_conditions_select_id = "co_morbid_conditions";
var list = document.getElementById(comorbid_conditions_select_id);

// 清空现有选项
list.options.length = 0;

// 只添加业务选项，不需要手动加占位
for (var i = 0; i < comorbid_conditions_sortOpt.length; i++) {
  list.options[list.length] = new Option(comorbid_conditions_sortOpt[i], comorbid_conditions_sortOpt[i]);
}

// 初始化Materialize多选组件
$('select').formSelect();

// 监听选中状态变化，确保label正确浮动
$('#co_morbid_conditions').on('change', function() {
  var selectedValues = $(this).val();
  var $label = $(this).siblings('label');
  
  if (selectedValues && selectedValues.length > 0) {
    $label.addClass('active'); // 有选中项时，label浮动到上方
  } else {
    $label.removeClass('active'); // 无选中项时，label回到输入框内作为占位符
  }
});

3. 如果必须保留"Choose your option"占位选项

如果你业务上需要显示这个文本作为初始提示，那可以修改动态添加逻辑，不要设置defaultSelected，同时在初始化后处理占位的隐藏逻辑：

var comorbid_conditions_select_id = "co_morbid_conditions";
var list = document.getElementById(comorbid_conditions_select_id);

list.options.length = 0;
// 添加禁用的占位选项，但不要设置defaultSelected
var placeholderOpt = new Option("Choose your option", "");
placeholderOpt.disabled = true;
list.options[list.length] = placeholderOpt;

// 添业务选项
for (var i = 0; i < comorbid_conditions_sortOpt.length; i++) {
  list.options[list.length] = new Option(comorbid_conditions_sortOpt[i], comorbid_conditions_sortOpt[i]);
}

$('select').formSelect();

// 监听选中事件，控制占位选项的显示/隐藏
$('#co_morbid_conditions').on('change', function() {
  var selectedValues = $(this).val();
  var $selectWrapper = $(this).closest('.select-wrapper');
  var $placeholderTag = $selectWrapper.find('.select-dropdown [data-value=""]');
  var $label = $(this).siblings('label');
  
  if (selectedValues && selectedValues.length > 0) {
    $placeholderTag.hide(); // 有选中项时隐藏占位的UI标签
    $label.addClass('active');
  } else {
    $placeholderTag.show(); // 无选中项时显示占位
    $label.removeClass('active');
  }

  // 修复重复选中值：移除重复的已选标签
  var $selectedTags = $selectWrapper.find('.selected span');
  var uniqueTexts = [];
  $selectedTags.each(function() {
    var text = $(this).text();
    if (uniqueTexts.includes(text)) {
      $(this).parent().remove(); // 移除重复的标签
    } else {
      uniqueTexts.push(text);
    }
  });
});

关键注意事项 #

1. 动态修改select选项后，如果是在初始化完成后再修改，需要先销毁组件再重新初始化：

   $('select').formSelect('destroy');
   $('select').formSelect();
   

2. 多选模式下，不要给任何选项设置defaultSelected，这会干扰Materialize的选中状态判断，导致渲染异常。
3. Materialize的label本身就可以作为占位符，不需要额外添加空选项，这是组件的原生设计，用起来更稳定。

内容来源于stack exchange