zoukankan      html  css  js  c++  java
  • 选取下拉框,显示对应的图片

    <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>
  • 相关阅读:
    Jquery学习系列-制作Menu
    关于javascript里的parseInt() 与 parseFloaat() 文本转换为数字
    javascript简述
    【代码片段】HTML5基本结构及常用默认模版
    赋值运算符
    【代码片段】jQuery实现页面滚动时层智能浮动定位Fixed Floating Elements
    【代码片段】formLogin
    算数运算符
    关于javascript里的toFixed()方法格式化数字
    关于javascript里的setTimerout()设定时间
  • 原文地址:https://www.cnblogs.com/bulrush/p/5978580.html
Copyright © 2011-2022 走看看