Javascript文本链接onClick以选择下拉选项值（onChange？）

我在Wordpress Woo commerce单一产品页面上有一个选择框，当选择颜色选项时，它会更改主图像，并显示一个“添加到购物车”按钮来购买特定的变体

我正在构建一个色样功能，目前它通过文本链接的onClick事件从下拉列表中选择一个选项，但它只是在选择框中显示新选项，并且不会加载新图像或实际更改所选的变体以进行购买

这是它当前的外观，这是错误的，因为图像和SKU没有更改：

HTML:

这可以通过对选择框应用onChange来正确选择选项来实现吗？jQuery被加载到站点上，这样也可以了

非常感谢您的帮助，如果我不清楚，请告诉我。谢谢

编辑：非常感谢这两个答案对我的帮助，但这似乎不可能实现，所以我现在放弃并使用了一个用于样例的插件。

试试这个：

function setSelectedOption(selectID, valueToSelect){

    $("#" + selectID + " option[value='" + valueToSelect + "']").attr('selected', 'selected');        
}

$('#chooseMe').on("click",function(e){   
    e.preventDefault(); 
    var select = $(this).html().toLowerCase();

    setSelectedOption("pa_colour",select);  
});

---

这里的工作提琴：

您需要在更改下拉列表时更改图像？？？它需要实际选择该选项，然后告诉Woo commerce执行其自己的功能，例如更改图像、显示正确的SKU和显示正确的“添加到购物车”按钮等。感谢您的快速回复！与仅仅更改图像不同，Woo commerce会对所选的变体执行一些其他操作，例如更改显示的SKU并显示正确的“添加到购物车”按钮，因此我希望javascript复制对该选项的实际点击，以便它使用Woo commerce自己的功能更改所有内容。也感谢您的快速回复！我想我的问题可能还不够清楚。选择框已经显示了正确的值，所以这不是问题所在，它只是试图让选择框在鼠标单击但使用文本链接进行物理更改时执行其功能。还没有，但我们肯定会越来越近，因此感谢您的帮助！这确实将所选属性应用于该选项，但仍无法实际选择该选项。我不认为选择的属性实际上是必要的，所以我们现在可以忽略它。这是页面加载时的外观：，以及单击黑色时的外观：。不完全是，我希望选择框充当真正的单击，这将告诉其他一些功能运行，包括更改图像和更改SKU。这似乎是不可能的，所以我使用了一个插件，但无论如何，谢谢你的回答，我真的很感激。

$(document).ready(function() {
    $("#pa_colour").change(function() {
        var src = $(this).val();

        $("#imagePreview").html(src ? "<img src='" + src + "'>" : "");
    });
});

function setSelectedOption(selectID, valueToSelect){

    $("#" + selectID + " option[value='" + valueToSelect + "']").attr('selected', 'selected');        
}

$('#chooseMe').on("click",function(e){   
    e.preventDefault(); 
    var select = $(this).html().toLowerCase();

    setSelectedOption("pa_colour",select);  
});