<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>魔兽世界八大种族</title>
<!-- 导入 jQuery 库 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("select").click(function(){
var flag = this.value;
$("img").attr("src",flag);
});
})
</script>
</head>
<body>
<h1>魔兽世界八大种族</h1>
<select>
<option value="img/dwarves-small.jpg">矮人</option>
<option value="img/gnomes-small.jpg">侏儒</option>
<option value="img/humans-small.jpg">人类</option>
<option value="img/nightelves-small.jpg">暗夜精灵</option>
<option value="img/orcs-small.jpg">兽人</option>
<option value="img/tauren-small.jpg">牛头人</option>
<option value="img/trolls-small.jpg">巨魔</option>
<option value="img/undead-small.jpg">亡灵</option>
</select>
<br><br>
<img src="img/dwarves-small.jpg"">
</body>
</html>
<html>
<head>
<script type="text/javascript">
function show() {
document.getElementById("heading").src = document.getElementById("selection").value;
}
</script>
</head>
<body>
魔兽世界八大人类<br><br>
<select id="selection" onchange="show()">
<option value="img/dwarves-small.jpg">矮人</option>
<option value="img/gnomes-small.jpg">侏儒</option>
<option value="img/humans-small.jpg">人类</option>
<option value="img/nightelves-small.jpg">暗夜精灵</option>
<option value="img/orcs-small.jpg">兽人</option>
<option value="img/tauren-small.jpg">牛头人</option>
<option value="img/trolls-small.jpg">巨魔</option>
<option value="img/undead-small.jpg">亡灵</option>
</select>
<br><br>
<img id="heading" src="img/dwarves-small.jpg" />
</body>
</html>
