zoukankan      html  css  js  c++  java
  • 要求能够动态根据下拉列表的选项变 化,更新图片的显示

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <script type='text/javascript'>
     7      window.onload = function(){
     8        function getImg(){
     9          var q = document.getElementsByTagName("option")
    10          for(var i=0;i<q.length;i++){
    11            q[i].onclick = function(){
    12              var pic = document.getElementById('pic')
    13                             
    14                 pic.src = this.value +'.jpg'
    15                console.log(pic.src)
    16            
    17              
    18            }
    19          }
    20          
    21 
    22        }
    23        getImg()
    24      }
    25     
    26     </script>
    27 </head>
    28 
    29 <body>
    30 <img src="./img1.jpg" alt="" id="pic" width="200">
    31 <br/>
    32 <select id='sel'>
    33     <option value='img1'>城市生活</option>
    34     <option value='img2'>都市早报</option>
    35     <option value='img3'>青山绿水</option>
    36 </select>
    37 </body>
    38 </html>

    思路  : 一个option对应一张图片

                  改图片,改的是图片的src 里的img1这个数

                   而每个option正好有个value属性,正好对应图片的src  拿过来用就行

  • 相关阅读:
    hdu 1896 stones
    各种类型的取值范围
    RSS/PSS/VSZ
    kasan BUG log
    ARM机器码分析
    Linux进程状态
    谢宝友: 深入理解RCU之七:分级RCU实现
    rcu_preempt detected stalls on CPUs/tasks
    Linux 内核 hlist
    linux cmd
  • 原文地址:https://www.cnblogs.com/kanchai/p/13368320.html
Copyright © 2011-2022 走看看