doupa9062 2013-01-28 19:24
浏览 179
已采纳

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

I am new to PHP and am trying to figure out how to code some specific functionality. I have a product page that shows a photo and has two dropdown menus, one for size and one for color. What I would like to do is when the page first loads I set a variable that has the default product SKU. When the menus change I want to change the variable to the combined values of the two menu items selected. As the variable changes I want to reflect this in the photo and in a hidden form value (for eventual submission to a cart).

So when the page loads it shows picture A with the associated values in the size and color dropdowns. Then when either of the dropdowns change the photo dynamically changes to reflect it (while also updating the hidden form value).

Any suggestions would be much appreciated.

  • 写回答

2条回答 默认 最新

  • doudie2693 2013-01-28 19:31
    关注

    JavaScript, or a JS library like jQuery, is what you need here.

    For jQuery (preferred, way easier):

    var $select = $('#Dropdown'),
        $img = $('#Picture');
    
    $select.on('change',function(){
        $img.attr('src',$(this).val());
    });
    

    For JavaScript:

    var dropdown = document.getElementById('Dropdown'),
        img = document.getElementById('Picture');
    
    dropdown.addEventListenter('change',function(){
        img.src = this.value;
    });
    

    Not tested, but should work.

    Edit: when using the JavaScript solution, make sure the window is loaded first (it won't work if the elements dont exist yet).

    window.onload = function(){
        // do your magic here
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥20 怎么在stm32门禁成品上增加记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B
  • ¥15 想问一下stata17中这段代码哪里有问题呀
  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 解riccati方程组