模拟鼠标单击下拉列表

Question

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

当用户手动选择下拉列表时，此功能正常，但是，我试图通过根据浏览器cookie（或缺少一个）预先为用户选择适当的选项来加快进程速度

例如，如果用户没有进入他们的区域，他们的浏览器将没有我已经命名为＆＃34; pc-entered＆＃34;并运行以下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');  
        }
    });
}); 

这样做有效，成功地预先选择了正确的＆＃39;泛型＆＃39;自动下拉选项。

不幸的是，这就是我遇到的问题 - 虽然下拉列表是正确的，但价格并不像用户手动选择区域时那样自动填充。

E.g。

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，以便您可以对其进行测试。