Question

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

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

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

When "Black" is clicked (note that the image and SKU haven't changed)

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被加载到网站上，所以也没关系。

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

编辑：非常感谢两个尝试帮助的答案，但似乎无法实现，所以我现在已经放弃并使用了一个插件来进行色板。

Answer 1

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

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

Answer 2

试试这个：

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/

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

2 个答案: