如何使用JavaScript重置MDB Select下拉选择框？

问题根因 #

你使用的是MDB 4.x Pro版本封装的materialSelect组件，该组件初始化后会基于原生<select>生成自定义的可视化UI结构，仅修改原生select的selectedIndex只会更新底层DOM属性，不会同步到MDB渲染的可见输入框、下拉选中状态，所以视觉上没有重置效果。
另外你当前的两个select元素都放在<form id="bmrcalc">标签外部，原生form的reset方法本身也无法处理表单外的元素。

解决方案 #

修改resetFields函数，修改原生选中值后调用MDB提供的materialSelect('update')方法同步UI即可，同时覆盖两个下拉框的重置逻辑：

// Reset
function resetFields() {
  document.getElementById("bmrcalc").reset();
  // 遍历处理两个下拉选择框
  const selectIds = ['select-sex', 'select-lifestyle'];
  selectIds.forEach(selectId => {
    const nativeSelect = document.getElementById(selectId);
    nativeSelect.selectedIndex = 0;
    // 调用MDB组件方法同步更新UI显示
    $(nativeSelect).materialSelect('update');
  });
}

补充说明 #

如果希望原生form的reset方法可以直接覆盖select元素，可以把两个<select>标签移入<form id="bmrcalc"></form>内部，符合表单元素的语义规范。

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