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