以编程方式更改 Wordpress 中的 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>

显示的文本，它与隐藏的

value

选项属性不同（不显示）:

<option value="String 1 (hidden)">String 1 (displayed)</option> 因此您还需要使用

text

 属性更改此显示的选项文本值，例如：

var myItem      = wpcf7Form.querySelector('select[name="menu-1"]');
var secondValue = myItem[1].value;
var secondText  = myItem[1].text;

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

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

现在它应该可以按预期工作。