m0_75220549 2023-08-22 14:24 采纳率: 50%
浏览 2
已结题

前端方面的下拉菜单配合图片问题

有没有人会那种，上面是一张图片，下面是一个下拉菜单，选择菜单内不同的选项，上面的图片对应改变

  • 写回答

2条回答 默认 最新

  • 雾里桃花 2023-08-22 15:23
    关注
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<img src='https://tse4-mm.cn.bing.net/th/id/OIP-C.F42nB-pEoV-wj4BrehcQtwAAAA?w=204&h=204&c=7&r=0&o=5&pid=1.7' id='img' />
    <div>
    <select id='select'>
        <option label='图片1' value='https://tse4-mm.cn.bing.net/th/id/OIP-C.F42nB-pEoV-wj4BrehcQtwAAAA?w=204&h=204&c=7&r=0&o=5&pid=1.7' />
        <option label='图片2' value='https://p.qqan.com/up/2020-3/2020031619533643793.jpg' />
    </select>
    </div>    
</body>
    
    <script>
        let $img = document.getElementById('img')
        let $select = document.getElementById('select')
        
        $select.onchange = function(e) {
            $img.src = $select.value
            console.log( $select.value)
        }
    </script>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 8月30日
  • 已采纳回答 8月22日
  • 创建了问题 8月22日

悬赏问题

  • ¥15 CPU卡指令整合指令数据都在图片上
  • ¥15 火车票关联12306问题
  • ¥15 odoo17处理受托加工产品
  • ¥15 如何用MATLAB编码图三的积分
  • ¥15 圆孔衍射光强随孔径变化
  • ¥15 MacBook pro m3max上用vscode运行c语言没有反应
  • ¥15 ESP-PROG配置错误，ALL ONES
  • ¥15 结构功能耦合指标计算
  • ¥50 AI大模型精调（百度千帆、飞浆）
  • ¥15 非科班怎么跑代码？如何导数据和调参