<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>