要求能够动态根据下拉列表的选项变 化,更新图片的显示

 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  拿过来用就行

原文地址:https://www.cnblogs.com/kanchai/p/13368320.html