如何用原生JavaScript模拟下拉菜单的人工选择操作？

你遇到的问题核心是：WordPress的Gutenberg编辑器（即模板选择器所属的编辑器）基于React构建，它的UI状态同步依赖用户交互事件，单纯修改DOM元素的value或selected属性，只会更新DOM本身，不会触发编辑器内部的状态更新逻辑。

要模拟人工选择的完整效果，你需要在修改DOM值后手动触发change事件，让编辑器感知到变更。

完整解决方案代码 #

// 获取目标下拉选择器
const templateSelector = document.querySelector('select#inspector-select-control-0');
// 设置需要选中的模板值
templateSelector.value = 'article.php';
// 创建并触发change事件（bubbles: true确保事件能向上冒泡被编辑器捕获）
templateSelector.dispatchEvent(new Event('change', { bubbles: true }));

为什么之前的方法无效？ #

• 直接修改selector.value或遍历设置option.selected，仅仅是修改了DOM的属性值，但Gutenberg的组件状态并不直接绑定DOM属性，而是通过监听change这类原生事件来同步数据和UI。
• 人工选择时浏览器会自动触发change事件，而手动修改DOM不会，所以必须手动触发这个事件才能让编辑器更新后方的模板标识等UI内容。

兼容旧环境的备选写法 #

如果上面的Event构造函数在旧环境里不生效，可以用传统的事件创建方式：

const templateSelector = document.querySelector('select#inspector-select-control-0');
templateSelector.value = 'article.php';

// 兼容旧版浏览器的事件创建方式
const changeEvent = document.createEvent('HTMLEvents');
changeEvent.initEvent('change', true, true);
templateSelector.dispatchEvent(changeEvent);

注意事项 #

• 确保代码执行时目标元素已经加载完成，比如放在DOMContentLoaded回调中，或者在浏览器控制台执行时确认元素存在。
• 如果下拉框的ID不是固定的inspector-select-control-0（比如编辑器中有多个选择控件时ID会动态变化），可以结合父容器的选择器定位，比如：

  // 假设模板选择器在class为"template-select-container"的容器内
  const templateSelector = document.querySelector('.template-select-container .components-select-control__input');
  

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