select box 옆에 선택옵션별로 text 나타내기

상품별 안내 메세지 다르게 나타내기

select box 옆에 선택옵션별로 text 나타내기

<script language="javascript" src="costchange.asp"></script>

<script type="text/javascript"> 

function pro_img_change_nomal(){

    var frm = document.orderform;

   if (frm.paper_code[frm.paper_code.selectedIndex].text == "상품 1"){

        frm.product_img.src= "/common/images/product_1.jpg"

   }

   else if (frm.paper_code[frm.paper_code.selectedIndex].text == "상품 2"){

         frm.product_img.src=  "/common/images/product_2.jpg"

   }

   else if (frm.paper_code[frm.paper_code.selectedIndex].text == "상품 3"){

         frm.product_img.src=  "/common/images/product_3.jpg"

   }

}

</script>

<table border="0" cellpadding="0" cellspacing="0">

  <tr>

<th class="pdt12" valign="top"><p class="t_txt06"></p></th>

  <td class="pdt12">

           <select class='drop02' style="width:160px; float:left;" id="paper_code" name="paper_code" onChange="javascript:pro_img_change_nomal();costchange();chkcost();">

<option value='ppkh5' <%if paper_code="ppkh5" then %> selected<%end if %>>상품 1</option>

<option value='ppkh6' <%if paper_code="ppkh6" then %> selected<%end if %>>상품 2</option>

<option value='ppkh8' <%if paper_code="ppkh8" then %> selected<%end if %>>상품 3</option>

    </select>

<span id="out_msg" style="display:none;"> <span id="out_msg_detail" class="font12" style=" color:#ff0000; vertical-align: top; line-height: 0px; font-weight:bold; font-size:11px;" ></span>

</span> 

<span id="out_msg_01" style="display:none;"> <span id="out_msg_detail" class="font12" style=" color:#ff0000; vertical-align: top; line-height: 0px; font-weight:bold; font-size:11px;" >* 상품 1 메세지</span>

</span>

<span id="out_msg_02" style="color:#ff0000; vertical-align: top; line-height: 8px; font-weight:bold; font-size:11px; padding-left:114px; display:none;">

<span>* 남은 수량 10개</span></span>

  </td>

</tr>

 </table>

costchange.asp 파일에

function costchange()

{

    if (document.orderform.paper_code.value == "ppkh5" ){

        document.all.out_msg_01.style.display="block";

        document.all.out_msg_02.style.display="none";

    }

else if (document.orderform.paper_code.value == "ppkh6" ){

        document.all.out_msg_01.style.display="none";

        document.all.out_msg_02.style.display="block";

    }

    else{

        document.all.out_msg.style.display="none";

    }

}