模擬鼠標點擊下拉

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這樣你就可以對其進行測試。