如何通过外部链接点击选中Wordpress下拉选项并触发下级下拉联动过滤

问题根源 #

直接修改select元素的selectedIndex属性仅会修改选中状态，不会自动触发元素绑定的事件。二级型号的过滤逻辑通常绑定在厂商下拉框的change事件上，因此不会被触发。

修复方法 #

在设置完selectedIndex后，手动触发对应事件即可，根据你站点联动逻辑的实现方式，二选一添加触发代码即可：

原生JS绑定事件场景 #

添加原生事件触发代码：

const changeEvent = new Event('change', { bubbles: true });
dd.dispatchEvent(changeEvent);

jQuery绑定事件场景（WordPress站点绝大多数联动逻辑用该方案实现） #

添加jQuery事件触发代码：

jQuery(dd).trigger('change');

修改后完整代码 #

function spage() {
   var valueToFind= '1';
   var dd = document.getElementById('device_manufacturer');
   for (var i = 0; i < dd.options.length; i++) {
       if (dd.options[i].value === valueToFind) {
           dd.selectedIndex = i;
           // 原生事件触发，二选一
           const changeEvent = new Event('change', { bubbles: true });
           dd.dispatchEvent(changeEvent);
           // 若上方无效则注释上方代码，启用下方jQuery触发代码
           // jQuery(dd).trigger('change');
           console.log(dd.options[i].value);
           console.log(i);
           break;
       }
   }                    
}

异常排查 #

• 若以上代码无效，先确认联动逻辑绑定的事件名，部分场景可能绑定input、click事件，将代码中的change替换为对应事件名即可
• 若使用了Select2等下拉美化组件，直接调用组件API设置值：jQuery('#device_manufacturer').val(valueToFind).trigger('change')
• 确认元素IDdevice_manufacturer拼写正确，和绑定事件的元素ID一致

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