php - 使用下拉菜单动态更改照片

Question

我是 PHP 的新手，正在尝试弄清楚如何编写某些特定功能的代码。我有一个显示照片的产品页面，并有两个下拉菜单，一个用于尺寸，一个用于颜色。我想做的是，当页面首次加载时，我设置了一个具有默认产品 SKU 的变量。当菜单更改时，我想将变量更改为所选两个菜单项的组合值。随着变量的变化，我想在照片和隐藏的表单值中反射(reflect)这一点(以便最终提交到购物车)。

因此，当页面加载时，它会显示图片 A，并在尺寸和颜色下拉列表中显示相关值。然后，当任一下拉菜单更改时，照片会动态更改以反射(reflect)它(同时也会更新隐藏的表单值)。

如有任何建议，我们将不胜感激。

Answer 1

JavaScript 或像 jQuery 这样的 JS 库是您在这里所需要的。

对于 jQuery(首选，更简单):

var $select = $('#Dropdown'),
    $img = $('#Picture');

$select.on('change',function(){
    $img.attr('src',$(this).val());
});

对于 JavaScript:

var dropdown = document.getElementById('Dropdown'),
    img = document.getElementById('Picture');

dropdown.addEventListenter('change',function(){
    img.src = this.value;
});

未测试，但应该可以。

编辑:当使用 JavaScript 解决方案时，确保首先加载窗口(如果元素尚不存在，它将不起作用)。

window.onload = function(){
    // do your magic here
}