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

현재접속자 최신글 매뉴얼 FAQ
그누보드5
그누보드6
가이드
포럼
  • Q&A
  • 파이써니스타
  • 이슈
  • 버그신고
  • 사용후기
    • 자료실
  • 다운로드
  • 팁자료실
  • 스킨
  • 테마
  • 플러그인
    • Q & A
    궁금한 게 있으신가요? 지금 질문해보세요!
    솔루션
    프로그래밍
    서버
    사이트운영
    컨텐츠몰
    나의 재능을 팔아보세요!
    부가서비스
    프로모션! 신용카드 결제수수료 2.9%
    제작의뢰
    커뮤니티
    커뮤니티
    소모임
    스터디
    강좌
    기타

    영카트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>
    추천
    0

    댓글 3개

    해바리 자기소개 아이디로 검색 전체게시물 회원게시물 17.04.10 12:28:45
    디비연동 입니다.
    <?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>
    전체 392
    영카트5 팁자료실 내용 검색

    회원로그인

    (주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
    사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
    © SIRSOFT