본문 바로가기
웹프로그래밍/Javascript|JQuery|Jsp

[JavaScript] select 박스 선택시 이미지 나타나기

by Seras 2017. 6. 7.
반응형




        [JavaScript] select 박스 선택시 이미지 나타나기

 


jsp



<select id="selectBox" name="selectBox" onChange="selectForm(this.options[this.selectedIndex].value)" style=width:200 > 

   <option>--선택--</option> 

   <option value="1">1</option> 

   <option value="2">2</option> 

   <option value="3">3</option>

</select>



<div id="allForms">                    

       // 1      

    <div style="color: #000; background:#FE2E2E; width:725px; padding: 5px; display:none;"> 

          <img src="<c:url value="[이미지 경로]" />"/> 

     </div>


       // 2

    <div style="color: #000; background:#FE2E2E; width:725px; padding: 5px; display:none;"> 

          <img src="<c:url value="[이미지 경로]" />"/> 

     </div>


       // 3

     <div style="color: #000; background:#FE2E2E; width:725px; padding: 5px; display:none;"> 

          <img src="<c:url value="[이미지 경로]" />"/> 

     </div>

                              

</div>











javascript



<script type="text/javascript">


//셀렉트 박스 미리보기

    function selectForm(frm){ 

       var hiddenForms = document.getElementById("allForms"); 

       theForm = hiddenForms.getElementsByTagName("div"); 

         for(x=0; x<theForm.length; x++){ 

         theForm[x].style.display = "none"; 

      } 

      if (theForm[frm-1]){ 

        theForm[frm-1].style.display = "block"; 

      } 

    } 

</script  







반응형