반응형

vpn 장비 쇼핑몰 이라할때
vpn 상품등록을 DB에 아래와 같이 한후

속도 : 10|20|30
ip갯수 : 10~20/20~30|15|25
기간:가격 : 6:1000-12:2000/6:2000-12:3000|6:3000-12:4000|6:5000-12:6000

split 규칙을 이용하여
다차원 배열로 카테고리 값들을 설정 한 후
jquery의 셀렉터 등을 이용하여 동적으로 셀렉트 값들을 변경한다


<? 
# 작성자 : 박병훈 <argethero@naver.com>
 include "../../include/pubTop.php";

 #상품정보
 $q = "select * from goods where idx = $pCode";
 $res = mysql_query($q);
 $pData = mysql_fetch_array($res);
 #배열변수
 $ipNums = array();
 $price_periods = array();
 #스크립트 배열변수에 현재 제품에 관한 모든 정보를 넣어놓는다
 echo "<script>";
 echo "var ipNums = new Array();\n";
 echo "var prices = new Array();\n";
 #속도
 $speedArr = explode("|",$pData[speed]); 
 #ip갯수
 $ipNumArr = explode("|",$pData[ipNum]);
 #기간,금액
 $priceArr = explode("|",$pData[price_period]); 
 #속도의 종류만큼 하위 카테고리 분할 [간만에 머리좀 쓰자. 3차원 배열 ㅡ,.ㅡ]
 for($i = 0 ; $i < sizeof($speedArr); $i++) {
  
  $ipNumArr2 = explode("/",$ipNumArr[$i]);
  $priceArr2 = explode("/",$priceArr[$i]);
  echo "\t ipNums[$i] = new Array();\n";
  echo "\t prices[$i] = new Array();\n";
  
  for($j = 0 ;$j < sizeof($ipNumArr2); $j++) {
   echo "\t\t ipNums[$i][$j] = '$ipNumArr2[$j]';\n";
   echo "\t\t prices[$i][$j] = new Array();\n";
   $priceArr3 = explode("-",$priceArr2[$j]);
   for($k = 0; $k < sizeof($priceArr3) ; $k ++) {
    echo "\t\t\t prices[$i][$j][$k] = '$priceArr3[$k]';\n";
   }
  }  
 } 
 echo "</script>\n";
 //echo "<pre>";
 //print_r($ipNums);
 
?>
<script>
function set_category(obj) {
 
 $("#ipNum option").remove();
 $("#ipNum").append("<option value=''>IP 개수</option>");    
 flag = obj.value.split("_");
 n = flag[1]; 
 for(i = 0 ; i < ipNums[n].length; i++) {
  //alert(ipNums[n][i]); 
  $("#ipNum").append("<option value='"+ipNums[n][i]+"_"+n+"_"+i+"'>"+ipNums[n][i]+"개</option>");    
 }
}
function set_category2(obj) {
 
 $("#price_period option").remove();
 $("#price_period").append("<option value=''>기간</option>");
 flag = obj.value.split("_");
 n = flag[1];
 n2 = flag[2]; 
 for(j = 0 ; j < prices[n][n2].length ; j++) {
  period = prices[n][n2][j].split(":");
  period = period[0];
  $("#price_period").append("<option value='"+prices[n][n2][j]+"'>"+period+"개월</option>");   
 } 
}
function set_price(obj) {
 price = obj.value.split(":");
 alert(price[1]);
 $("#showPrice").html(price[1]);
 $("#showPrice").addClass("sum");
}
</script>
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
         <td><img src="/images/sub_title.gif"></td>
       </tr>
       <tr>
         <td background="/images/sub_bg.gif">
         <!--세부페이지-->
         <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
           <tr>
             <td>
             <table width="595" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
                 <td colspan="4"><img src="image/product_title.gif"></td>
      </tr>
      <tr>
                 <td height="20" colspan="4"></td>
      </tr>
      <tr>
                 <td><img src="<?=$pData[product_imgPath]?>"></td>
                 <td width="15"></td>
                 <td width="230">
                
                 <table width="100%" border="0" cellspacing="0" cellpadding="0">
                   <tr>
                     <td width="40"><img src="image/pd_info_list_name.gif"></td>
                     <td width="20">&nbsp;</td>
                     <td class="Pname"><?=$pData[name]?></td>
                   </tr>
                   <tr>
                     <td><img src="image/pd_info_list_cpname.gif"></td>
                     <td>&nbsp;</td>
                     <td class="Cname"><?=$pData[com_name]?></td>
                   </tr>
                   <tr>
                     <td><img src="image/pd_info_list_select1.gif"></td>
                     <td>&nbsp;</td>
                     <td>
                     <select name="speed" id="speed" style="width:150;" class="Dbtxt1" onchange="set_category(this);">
                       <option value="">속도선택</option>
                       <? for($i = 0 ; $i < sizeof($speedArr); $i++) { ?>
         <option value="<?=$speedArr[$i]?>_<?=$i?>"><?=$speedArr[$i]?>Mbps</option>
         <? } ?>
                     </select>
                     </td>
                   </tr>
                   <tr>
                     <td><img src="image/pd_info_list_select2.gif"></td>
                     <td>&nbsp;</td>
                     <td>
                     <select name="ipNum" id="ipNum" style="width:150;" class="Dbtxt1" onchange="set_category2(this);">
                       <option value="">IP 개수</option>                      
                     </select>
                     </td>
                   </tr>
                   <tr>
                     <td><img src="image/pd_info_list_select3.gif"></td>
                     <td>&nbsp;</td>
                     <td>
                     <select name="price_period" id="price_period" style="width:150;" class="Dbtxt1" onchange="set_price(this)">
                       <option value="">기간</option>
                     </select>
                     </td>
                   </tr>
                   <tr>
                     <td><img src="image/pd_info_list_sum.gif"></td>
                     <td>&nbsp;</td>
                     <td><div id="showPrice">옵션을 선택해 주세요</div></td>
                   </tr>
                   <tr>
                     <td colspan="3" height="45" align="center"><a href="#" onFocus="this.blur()"><img src="/images/btn_apply.gif" border="0"></a></td>
                   </tr>
                 </table>
                
                 </td>
               </tr>
             </table>
             </td>
           </tr>
           <tr>
             <td height="40"></td>
           </tr>
           <tr>
             <td><img src="image/pd_info_title_01.gif"></td>
           </tr>
     <tr>
             <td><? include_once $DOCUMENT_ROOT."$pData[product_detailPage]"; ?></td>
           </tr>          
           </table>
         <!--세부페이지 끝-->
         </td>
       </tr>
     </table>
<? include "../../include/pubBottom.php"; ?>  

반응형

'Web > javascript' 카테고리의 다른 글

google javascript hosting  (0) 2011.12.01
퀵메뉴 소스  (0) 2010.05.12
메모리 누수 방지  (0) 2010.04.07
[스크립트] [ 1원팁 ] prototype.js & jQuery 같이 Load 사용하기  (0) 2010.03.25
정규식으로 폼값 validation  (0) 2010.03.23

+ Recent posts