通过JavaScript修改MUI Select选中值未生效，如何解决？

直接修改DOM元素的value属性无法真正更新Material UI Select组件的选中状态，因为这类组件属于受控组件，选中值由内部状态管理，而非仅依赖DOM属性。你需要通过以下方式同步更新组件状态：

方法1：触发标准change事件 #

先设置DOM的value，再触发change事件让组件感知到值的变化：

// 获取目标Select元素
const selectEl = document.querySelector('.MuiSelect-root.MuiSelect-select.MuiInputBase-input.MuiInput-input');
// 设置目标值
selectEl.value = 'en-AU-Standard-A';
// 创建并触发冒泡的change事件
const changeEvent = new Event('change', { bubbles: true });
selectEl.dispatchEvent(changeEvent);

方法2：模拟点击对应选项（更可靠） #

直接找到目标选项并模拟点击，完全还原用户交互流程，确保组件状态同步更新：

// 找到对应值的下拉选项
const targetOption = document.querySelector(`[data-value="en-AU-Standard-A"]`);
// 模拟点击选项
if (targetOption) {
  targetOption.click();
}

注意事项 #

• 如果下拉框处于收起状态，可能需要先调用selectEl.click()打开下拉框，再点击选项（部分场景下不需要，MUI会自动处理状态同步）。
• 优先使用方法2，因为它完全遵循组件的交互逻辑，避免DOM状态与组件内部状态不一致的问题。

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