下拉列表框实现图像切换

xiaoxiao2021-02-28  64

下拉列表框实现图像切换。代码如下所示:

 

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <script language="javascript"> function $(id) {return document.getElementById(id);} //获取元素 function changeImage(){ var index = $("game").selectedIndex; //获取下拉框中选择项 $("show").src = $("game").options[index].value; //更改图片 } </script> </head> <body> <div align="center"> <form> <select id="game" onChange="changeImage()"> <option value="pic0.jpg">--请选择--</option> <option value="pic1.jpg">P1</option> <option value="pic2.jpg">P2</option> </select> </form> </div> <p align="center"><img src="pic0.jpg" id="show" width="200px"></p> </body> </html>

页面效果图:

 

转载请注明原文地址: https://www.6miu.com/read-2628452.html

最新回复(0)