下拉列表框实现图像切换。代码如下所示:
<!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>
页面效果图:
