如何通过JavaScript动态修改WordPress ContactForm7下拉菜单选项？

核心问题 #

你当前只修改了<option>的value属性（表单提交时的后台取值），但页面上显示的文本是<option>标签内部的内容，所以视觉上看不到变化；另外ContactForm7自带的JS可能会监听表单状态，直接修改DOM后需要触发更新事件。

解决方案 #

1. 同时修改选项的value和显示文本 #

要让页面同步显示修改后的内容，需要同时设置value和显示文本：

var wpcf7Form = document.querySelector('.wpcf7-form');
var myItem = wpcf7Form.querySelector('select[name="DropDown_Menu-1"]');
// 定位目标选项（示例为第二个选项，索引1）
var targetOption = myItem[1];
// 修改提交用的value值
targetOption.value = "new-value";
// 修改页面显示的文本
targetOption.textContent = "新的下拉选项文本";

2. 触发表单更新事件（可选） #

如果修改后仍不生效，说明ContactForm7的JS未感知到DOM变化，手动触发change事件即可：

myItem.dispatchEvent(new Event('change'));

3. 确保代码在表单加载完成后执行 #

ContactForm7可能会动态渲染表单，所以要把代码放在表单初始化完成的时机执行，推荐用CF7专属的wpcf7init事件：

document.addEventListener('wpcf7init', function() {
  var wpcf7Form = document.querySelector('.wpcf7-form');
  var myItem = wpcf7Form.querySelector('select[name="DropDown_Menu-1"]');
  
  if (myItem) {
    var targetOption = myItem[1];
    targetOption.value = "new-value";
    targetOption.textContent = "新的下拉选项文本";
    myItem.dispatchEvent(new Event('change'));
  }
});

更可靠的选项定位方式 #

避免依赖索引（索引可能随表单配置变化），可以通过原value或文本定位目标选项：

// 通过原value定位
var targetOption = myItem.querySelector('option[value="原选项value"]');
// 或通过原文本定位
var targetOption = myItem.querySelector('option:contains("原选项文本")');

if (targetOption) {
  targetOption.value = "new-value";
  targetOption.textContent = "新文本";
}

内容的提问来源于stack exchange，提问作者Ádám Kruzics