模拟鼠标点击下拉

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');

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

我的测试站点在这里 。

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这样你就可以对其进行测试。