javascript - 模拟鼠标点击下拉菜单

Question

我的 Wordpress 主题与 WooCommerce 交互，以便当用户从下拉列表中选择特定产品变量时，会显示其所在地区的特定价格。

当用户手动选择下拉菜单时，这工作正常，但是，我试图通过根据浏览器 cookie(或缺少浏览器 cookie)为用户预先选择适当的选项来加快该过程。

例如，如果用户没有输入他们的区域，他们的浏览器将不会有我命名为“pc-entered”的 cookie，并且将运行以下 jQuery 脚本:

$(function() {
    $('ul li.product').each( function() {
        /*If no region set by cookie*/
        if( document.cookie.indexOf("pc-entered=") < 0) {
            /*Set downdown to generic*/ 
            $(this).find("#pa_region").val('generic');  
        }
    });
}); 

这有效，成功地自动预选了正确的“通用”下拉选项。

不幸的是，这就是我陷入困境的地方 - 尽管下拉列表是正确的，但价格不会像用户手动选择其区域时那样自动填充。

例如

1) 使用我的脚本自动填充时:

2) 当用户选择时:

我尝试在我的脚本中替换它:

$(this).find("#pa_region").val('generic');

使用 this thread 上列出的选项但是，它们在这种情况下似乎不起作用。我还尝试在页面上的所有其他脚本之后触发该脚本，甚至使用超时功能延迟脚本运行，但似乎没有任何效果。

我的测试站点是here .

TLDR - 为什么我的 jQuery 脚本没有填充价格？

Answer 1

使用 $(this).find("#pa_region").val('generic'); 您仅更改下拉列表的 HTML 值(文本)。

您需要附加事件处理程序，该事件处理程序将触发您更改值的函数的更改。

function changeValue(){
  $("#pa_region").val('generic');
  $("#pa_region").trigger('change');
}

$( "#pa_region" ).change(function() {
  console.log( "Handler for .change() called." );
});

这就是解决问题的方法。

我还做了一个JSFiddle这样你就可以测试它。