如何用ChoicesJS修改WPForms下拉选择框的选中值？

核心思路 #

ChoicesJS会将原生select封装为自定义DOM结构，直接操作原生select无法同步UI状态，必须通过Choices提供的实例API完成选中值设置。

具体步骤 #

1. 获取Choices实例
   WPForms初始化Choices后，会在原生select元素上绑定choices属性，通过该属性可直接获取实例：

// 定位到目标select元素
const targetSelect = document.getElementById('wpforms-756-field_6');
// 获取对应的Choices实例
const choicesInstance = targetSelect.choices;

2. 设置选中值
   使用Choices的setChoiceByValue方法（单选场景更直观），传入目标选项的data-value值即可：

// 例如设置选中"Carnia epic trails"
choicesInstance.setChoiceByValue('Carnia epic trails');

或者使用setValue方法（单选需传入单元素数组）：

choicesInstance.setValue(['Carnia epic trails']);

3. 清空选中值
   若要恢复到默认的空选项，传入空字符串即可：

choicesInstance.setChoiceByValue('');

关键注意事项 #

• 确保代码在Choices初始化完成后执行，可放在DOMContentLoaded事件中，或监听WPForms的wpforms_ready事件：

document.addEventListener('DOMContentLoaded', function() {
  // 这里执行上述代码
});

• 此方法会自动同步Choices的UI显示与隐藏的原生select值，同时触发必要的事件，保证WPForms能正确获取表单数据。

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