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

查看全文

相关阅读:
流程控制
 小结
 运算符
 进制之间的转换
 自动类型转换和强制类型转换
 变量
 关键字，标识符，
NGINX 做TCP转发（端口转发）并记录日志
 redash安装
 解决 es CircuitBreakingException 问题（Data too large Error）

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

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

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