Javascript文本链接单击以选择下拉选项值(onChange?

Javascript text link onClick to select dropdown option value (onChange?)

本文关键字：选项 onChange 链接 文本 单击 选择 Javascript      更新时间：2023-09-26

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

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

这是它目前的外观（这是错误的，因为图像和SKU没有改变）：

违约

单击"黑色"时（请注意，图片和 SKU 未更改）

.HTML：

<select id="pa_colour" name="attribute_pa_colour">
  <option value="">Choose colour…</option>
  <option value="beige" class="active">Beige</option>
  <option value="black" class="active">Black</option>
  <option value="blue" class="active">Blue</option>
  <option value="brown" class="active">Brown</option>
</select>
<a class="swatch" id="s-black" href="#" 
onClick="document.getElementById('pa_colour').value='black'">Black</a>

这可以通过应用于选择框的onChange来正确选择选项来实现吗？ jQuery被加载到网站上，所以这也很好。

任何帮助不胜感激，如果我不清楚，请告诉我。谢谢。

编辑：非常感谢两个答案试图提供帮助，但这似乎不可能实现，所以我现在已经放弃并使用了色板插件。

$(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);  
});

在这里工作小提琴：http://jsfiddle.net/p36fV/2/

相关文章：