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