js中onchange（）的使用，实现功能，选择哪一张图片，显示哪一张
Posted 郑州大学计算机李银霞
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js中onchange（）的使用，实现功能，选择哪一张图片，显示哪一张相关的知识，希望对你有一定的参考价值。
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（）的使用，实现功能，选择哪一张图片，显示哪一张的主要内容，如果未能解决你的问题，请参考以下文章
在React JS中按下输入时如何实现onChange事件[重复]
多个select标签需要被同一个JS函数调用，怎么知道选中的是哪一个select标签？？
如何在 JS 函数 onchange 事件中获取 Bootstrap Datepicker 的值？