js中onchange（）的使用，實現功能，選擇哪一張圖片，顯示哪一張
阿新 • • 發佈：2017-10-22
pla option type oct 圖片 script www () height
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <style > 6 7 body{text-align:center} 8 div{align:center} 9 10 11 </style> 12 <title>無標題文檔</title> 13 </head> 14 15 <body> 16 17 <select id="option" onchange="change()"> 18 <option value="1">圖片1</option> 19 <option value="2">圖片2</option> 20 <option value="3">圖片3</option> 21 <option value="4">圖片4</option> 22 23 </select> 24 <br /><br /><br /><br /> 25 <div class="images" width="790px" > 26 <div align="center"> 27 <img id="1"width="790px" height="340px" src="../../課堂練習/js03/59a7a48aN7a42d3fe.jpg"style="display:block"/> 28 <img id="2"width="790px" height="340px" src="../../課堂練習/js03/59cc929fNaebef801.jpg" style="display:none"/> 29 <img id="3"width="790px" height="340px" src="../../課堂練習/js03/59ccc986Nbf17e33e.jpg" style="display:none"/> 30 <img id="4"width="790px" height="340px"src="../../課堂練習/js03/59ccec77N64688a8d.jpg" style="display:none"/> 31 </div> 32 </div> 33 <script> 34 function change(){ 35 var opt=document.getElementById("option"); 36 if(opt.value=="1"){ 37 var images=document.getElementsByTagName("img"); 38 for(var i=0;i<images.length;i++){ 39 if(images[i].id==1){ 40 images[i].style.display="block"; 41 }else{ 42 images[i].style.display="none"; 43 } 44 } 45 } 46 if(opt.value=="2"){ 47 var images=document.getElementsByTagName("img"); 48 for(var i=0;i<images.length;i++){ 49 if(images[i].id==2){ 50 images[i].style.display="block"; 51 }else{ 52 images[i].style.display="none"; 53 } 54 } 55 } 56 if(opt.value=="3"){ 57 var images=document.getElementsByTagName("img"); 58 for(var i=0;i<images.length;i++){ 59 if(images[i].id==3){ 60 images[i].style.display="block"; 61 }else{ 62 images[i].style.display="none"; 63 } 64 } 65 } 66 if(opt.value=="4"){ 67 var images=document.getElementsByTagName("img"); 68 for(var i=0;i<images.length;i++){ 69 if(images[i].id==4){ 70 images[i].style.display="block"; 71 }else{ 72 images[i].style.display="none"; 73 } 74 } 75 } 76 77 78 79 } 80 81 </script> 82 83 </body> 84 </html>
js中onchange（）的使用，實現功能，選擇哪一張圖片，顯示哪一張