0

I have a select box on a Wordpress Woo-commerce single product page which, when a colour option is selected, changes the main image and displays an add-to-cart button to purchase that particular variation.

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

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

默认

点击“黑色”时（注意图片和SKU没有变化）

HTML：

<select id="pa_colour" name="attribute_pa_colour">
  <option value="">Choose colour…&lt;/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 被加载到网站上，这样也可以。

任何帮助表示赞赏，如果我不清楚，请告诉我。谢谢。

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

4

2 回答 2

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

        $("#imagePreview").html(src ? "<img src='" + src + "'>" : "");
    });
});
于 2013-09-10T11:55:16.777 回答
0

尝试这个：

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/

于 2013-09-10T12:01:37.503 回答