选取下拉框，显示对应的图片

最新推荐文章于 2023-11-29 18:04:55 发布

weixin_30859423

最新推荐文章于 2023-11-29 18:04:55 发布

阅读量1.1k

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/bulrush/p/5978580.html

版权

<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" οnchange="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>

转载于:https://www.cnblogs.com/bulrush/p/5978580.html