如何以编程方式更改 ContactForm7 下拉菜单选择器？

Question

我想在我的网站中创建一个非常有用的 WordPress ContactForm7 部分。为了使其真正有用，我需要使用 JavaScript 动态更改某些下拉菜单的值。

最近几天到目前为止我还没有找到任何合适的解决方案，但尝试了以下方法；

使用 JS 访问选择器非常容易：

var wpcf7Form = document.querySelector('.wpcf7-form')
var myItem    = wpcf7Form.querySelector('select[name="DropDown_Menu-1"]')

我什至可以在这里列出我最初在 CF7 编辑块中设置的下拉菜单的默认值：

var SecondValue = myItem[1].value 
var FourthValue = myItem[3].value

但是我很难为各个下拉菜单项设置新值，即使在同一代码段中检查它们新给定的值似乎没问题！但实际上网站上没有任何变化！

myItem[1].value = "new Value"
var NewValue    = myItem[1].value    // and the value is now >new Value< but on the website the menus 2nd element remains the old value

知道如何以编程方式更改这些值吗？

Answer 1

您可能想要更改下拉相关选项上显示的

<option>

显示的“文本1”（因为选项属性

value

被隐藏，不显示）：

<option value="Value 1">Text 1</option>

因此您还需要更改显示的选项文本，例如：

var wpcf7Form   = document.querySelector('.wpcf7-form');
var myItem      = wpcf7Form.querySelector('select[name="menu-1"]');

var secondValue = myItem[1].value;
var secondText  = myItem[1].text;
var fourthValue = myItem[3].value;
var fourthText  = myItem[3].text;


myItem[1].value = "new Value"; // Change hidden value
myItem[1].text  = "new Value"; // <= Here we set the displayed text (value)

var NewValue    = myItem[1].value // (hidden value) 
var NewText     = myItem[1].text // (displayed text value)