使用下拉列表动态更改照片

Dynamically changing photo with dropdown

本文关键字：照片 动态 下拉列表      更新时间：2023-09-26

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

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

任何建议将不胜感激。

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
}

首先，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);
});
相关文章：