동적 셀렉트 메뉴입니다. > 영카트5 팁자료실

영카트5 팁자료실

동적 셀렉트 메뉴입니다. 정보

동적 셀렉트 메뉴입니다.

본문

동적 셀렉트 메뉴입니다.
서핑하다 한놈 업어왔습니다.
동작으로는 나무랄때없는데 4단셀렉트박스 자료모두 배열에 담아야합니다.
급하게 메뉴가 필요해서 서버에 부하가 좀 가지만 디비연동 동적메뉴로 바꿔습니다
아래 답글에 조금 수정된것 있습니다. 더 좋은 방법이 있으신분 자료 공유해주시면 감사......



<HTML>
<HEAD>
<TITLE> menu 동적 할당 </TITLE>
<script>
 function getCataAllId(cmd){
  cmd = eval(cmd);
  cmd2 = cmd +1;
  initCataID(cmd);
  var ch = "";
  for(var idx = 1; idx < cmd2; idx++){
      ch = ch + eval("document.f1.menu"+idx+".value") + "|"+idx+"|";
  }
  var v = 0;
  var temp = "";
  var tempv = "";
  var arg = "";
  for(var m = 0; m < menuArr.length; m ++) {
      arg = menuArr[m].substring(menuArr[m].indexOf("|"+cmd+"|")+3,menuArr[m].indexOf("|"+cmd2+"|")) ;
      temp = menuArr[m].substring(0, menuArr[m].indexOf("|"+cmd+"|")+3);
      if(temp == ch && tempv != arg ){
            v++;
            eval("document.f1.menu"+cmd2+".length = document.f1.menu"+cmd2+".length + 1");
            eval("document.f1.menu"+cmd2+".options["+v+"].value = arg ");
            eval("document.f1.menu"+cmd2+".options["+v+"].text  = arg ");
      }
      if(temp != ch){
          tempv = "";
      }else{
          tempv = menuArr[m].substring(menuArr[m].indexOf("|"+cmd+"|")+3,menuArr[m].indexOf("|"+cmd2+"|"));
      } 
  }
}
 
 function initCataID(cmd){
 cmd = eval(cmd);
  if(cmd == 1){
      document.f1.menu2.length = 1;
      document.f1.menu3.length = 1;
      document.f1.menu4.length = 1;
      document.f1.menu2.selectedIndex = 0;
      document.f1.menu3.selectedIndex = 0;
      document.f1.menu4.selectedIndex = 0;
  }
  if(cmd == 2){
      document.f1.menu3.length = 1;
      document.f1.menu4.length = 1;
      document.f1.menu3.selectedIndex = 0;
      document.f1.menu4.selectedIndex = 0;
  }
  if(cmd == 3){
      document.f1.menu4.length = 1;
      document.f1.menu4.selectedIndex = 0;
  }
 }
</script>

</HEAD>

<BODY>
<form name = 'f1' >

<select name = 'menu1' onchange='javascript:getCataAllId(1)'>
 <option value="" selected>선택하세요.</option>
</select>
<select name = 'menu2' onchange='javascript:getCataAllId(2)'>
 <option value="" selected>선택하세요.</option>
</select>
<select name = 'menu3' onchange='javascript:getCataAllId(3)'>
 <option value="" selected>선택하세요.</option>
</select>
<select name = 'menu4' >
 <option value="" selected>선택하세요.</option>
</select>
</form>
<p></p>
<font size = 2>

var menuArr => DB에서 가져오든 하드코딩 하든 위 구분자와 ; 구분자를 적절히 사용하여 만들어 놓는다.>
</font>
<script>
var menuArr = "디카|1|니콘|2|300만|3|쿨픽스3200|4|/디카|1|니콘|2|300만|3|쿨픽스5200|4|/디카|1|니콘|2|500만|3|쿨픽스3200|4|/디카|1|니콘|2|700만|3|쿨픽스3200|4|/디카|1|캐논|2|300만|3|파워샷A75|4|/디카|1|캐논|2|500만|3|파워샷A75|4|/핸디캠|1|소형|2|소니|3|DCR-HC|4|/핸디캠|1|소형|2|소니|3|DCR-IP|4|/TV|1|삼성|2|평면|3|30인치|4|/TV|1|삼성|2|평면|3|40인치|4|/PC|1|노트북|2|컴팩|3|P4|4|/PC|1|노트북|2|도시바|3|P4|4|".split("/");
  var z = 0;
  var temp = 0;
  initCataID(1);
  for(var m = 0; m < menuArr.length; m ++) {
      if ( menuArr[m].substring(0, menuArr[m].indexOf("|1|")) != temp ){
          document.f1.menu1.length =  document.f1.menu1.length + 1;
          document.f1.menu1.options[z+1].value = menuArr[m].substring(0, menuArr[m].indexOf("|1|")) ;
          document.f1.menu1.options[z+1].text = menuArr[m].substring(0, menuArr[m].indexOf("|1|")) ;
          temp = menuArr[m].substring(0, menuArr[m].indexOf("|1|"));
          z++;
      }
  }
</script>


</BODY>
</HTML>

댓글 전체

디비연동 입니다.
<?php
include_once('./_common.php');
    $sql = " select * from 테이블 ";
    $res = sql_query($sql);
    for ($i=0; $row = sql_fetch_array($res); $i++) {
          $nm[$i] = $row['필드1'].'|1|'.$row['필드2'].'|2|'.$row['필드3'].'|3|'.$row['필드4'].'|4|';
    }
?>

<HTML>
<HEAD>
<TITLE> menu 동적 할당 </TITLE>
<style>
.select1 {height:20px;width:80px;}
.select2 {height:20px;width:120px;}
.select3 {height:20px;width:150px;}
.select4 {height:20px;width:200px;}
</style>
<script type="text/javascript">
 function getCataAllId(cmd){
  cmd = eval(cmd);
  cmd2 = cmd +1;
  initCataID(cmd);
  var ch = "";
  for(var idx = 1; idx < cmd2; idx++){
      ch = ch + eval("document.f1.menu"+idx+".value") + "|"+idx+"|";
  }
  var v = 0;
  var temp = "";
  var tempv = "";
  var arg = "";
  for(var m = 0; m < menuArr.length; m ++) {
      arg = menuArr[m].substring(menuArr[m].indexOf("|"+cmd+"|")+3,menuArr[m].indexOf("|"+cmd2+"|")) ;
      temp = menuArr[m].substring(0, menuArr[m].indexOf("|"+cmd+"|")+3);
      if(temp == ch && tempv != arg ){
            v++;
            eval("document.f1.menu"+cmd2+".length = document.f1.menu"+cmd2+".length + 1");
            eval("document.f1.menu"+cmd2+".options["+v+"].value = arg ");
            eval("document.f1.menu"+cmd2+".options["+v+"].text  = arg ");
      }
      if(temp != ch){
          tempv = "";
      }else{
          tempv = menuArr[m].substring(menuArr[m].indexOf("|"+cmd+"|")+3,menuArr[m].indexOf("|"+cmd2+"|"));
      } 
  }
}
 
 function initCataID(cmd){
 cmd = eval(cmd);
  if(cmd == 1){
      document.f1.menu2.length = 1;
      document.f1.menu3.length = 1;
      document.f1.menu4.length = 1;
      document.f1.menu2.selectedIndex = 0;
      document.f1.menu3.selectedIndex = 0;
      document.f1.menu4.selectedIndex = 0;
  }
  if(cmd == 2){
      document.f1.menu3.length = 1;
      document.f1.menu4.length = 1;
      document.f1.menu3.selectedIndex = 0;
      document.f1.menu4.selectedIndex = 0;
  }
  if(cmd == 3){
      document.f1.menu4.length = 1;
      document.f1.menu4.selectedIndex = 0;
  }
 }


</script>

</HEAD>

<BODY>
<form name = 'f1' >

<select name = 'menu1' id='menu1' OnChange='javascript:getCataAllId(1)' class="select1">
 <option value="" selected>선택하세요.</option>
</select>
<select name = 'menu2' id='menu2' OnChange='javascript:getCataAllId(2)' class="select2">
 <option value="" selected>선택하세요.</option>
</select>
<select name = 'menu3' id='menu3' OnChange='javascript:getCataAllId(3)' class="select3">
 <option value="" selected>선택하세요.</option>
</select>
<select name = 'menu4' id='menu4' OnChange='javascript:gotomenu()' class="select4">
 <option value="" selected>선택하세요.</option>
</select>
</form>
<p></p>
<font size = 2>

</font>


<script type="text/javascript">
/* JSON encode, parse  */
var stuff = <?php echo json_encode($nm); ?>;
var str = JSON.stringify(stuff);
var menuArr = new Array();
      menuArr= JSON.parse(str);
var z1 = 0;
var temp1 = 0;
  initCataID(1);
  for(var m = 0; m < menuArr.length; m ++) {
      if ( menuArr[m].substring(0, menuArr[m].indexOf("|1|")) != temp1 ){
          document.f1.menu1.length =  document.f1.menu1.length + 1;
          document.f1.menu1.options[z1+1].value = menuArr[m].substring(0, menuArr[m].indexOf("|1|")) ;
          document.f1.menu1.options[z1+1].text = menuArr[m].substring(0, menuArr[m].indexOf("|1|")) ;
          temp1 = menuArr[m].substring(0, menuArr[m].indexOf("|1|"));
          z1++;
      }
      /*  index 1에 중복 제거입니다.  */
  }

function gotomenu()
{
      location.href = '#';
}
</script>


</BODY>
</HTML>
전체 217
영카트5 팁자료실 내용 검색

회원로그인

진행중인 포인트경매

  1. 포인트 경매!
    직접 등록해보세요!

(주)에스아이알소프트 (06253) 서울 강남구 강남대로 310, 1312호 (역삼동, 유니온센터) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT