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