Question

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

因此，当页面加载时，它会显示图片A，其中包含大小和颜色下拉列表中的相关值。然后，当任一下拉列表更改时，动态更改以反映它（同时还更新隐藏的表单值）。

我们非常感谢任何建议。

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
}

Answer 2

首先，PHP是一种服务器端语言，实际上意味着，它生成的任何内容都必须由服务器处理，然后再发送回浏览器。因此，在这种特殊情况下，您需要使用客户端语言（如Javascript），或者使代码更容易，例如jQuery等库。

要了解有关jQuery的更多信息，请参阅此处：

http://jquery.com/

在非常概括的术语中（因为您没有发布任何代码），这是一个更改的示例使用jQuery的图像：

// Select the dropdown from the DOM
var dropdown = $('#dropdown_id');

// Select the image from the DOM
var image = $('#image');

// Set the onchange event
// This will be fired when the select value is changed
dropdown.on('change',function(){
    // Get the value of the selected option
    var value = $(this).val();

    // Change the source of the image
    image.attr('src',value);
});

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

2 个答案: