로그인 ｜ 회원등록 ｜ 비번분실 ｜ 현재접속자 ｜ 모바일
메인 공지사항 기능소개 매뉴얼     TEST BOARD : [1]  [2]  [3]  [4]  [5]
내용없음9
내용없음10
      APPLICATION
무료 스킨.모듈

유료 스킨.모듈

활용 홈페이지

활용팁 공유

자료 공유

유틸리티

웹 스터디
제작자 리소스

최근 활용팁 공유 RANK
        -- update:30Min --


 4단 콤보 다중셀렉트 폼 구축하기
 application
활용팁 공유 		테크노트 사용에 관련된 노하우를 공유하는 게시판입니다.
홈페이지 작업/운용중에 알게 된 여러가지 활용팁을 올려 주세요.
나에겐 그저 습관일 뿐이던 것이 누군가에겐 엄청 큰 힘과 도구가 되는 경우가 많답니다.
자료등록시 적립되는 포인트는 200P 입니다.
     
  작성자 휘앙새
ㆍ조회: 14406  ㆍ추천: 0         
ㆍ작성일: 2007년 10월 8일 월요일
4단 콤보 다중셀렉트 폼 구축하기
질문/답변에 보니 다중 셀렉트 기능을 원하시는 분들이 많은데 소스 올리오니 잘 쓰시기 바랍니다.
user_add 값은 제가 필요에 맞게 한 것입니다. 자신의 홈피에 맞게 고쳐 쓰시면 됩니다.
 
========================================================================================

 <tr>
  <td colspan=6 style='padding:6;' bgcolor=#9BB5DD>
<select name="user_add9" id="combo_0" onChange="change(this)" style="width:80px; color:#5184CD; " class=write_input_select >
   <option value="대우">대우</option>
  <option value='현대'<? if ($Take_value[user_add9]=="현대") echo "selected"; ?>>현대</option>
  <option value='기아'<? if ($Take_value[user_add9]=="기아") echo "selected"; ?>>기아</option>
  <option value='쌍용'<? if ($Take_value[user_add9]=="쌍용") echo "selected"; ?>>쌍용</option>
  <option value='아우디'<? if ($Take_value[user_add9]=="아우디") echo "selected"; ?>>아우디</option>
  <option value='벤츠'<? if ($Take_value[user_add9]=="벤츠") echo "selected"; ?>>벤츠</option>
</select>
<select name="user_add12" id="combo_1" onChange="change(this)" style="width:150px; color:#5184CD;" class=write_input_select >
  <option value='<?=$Take_value[user_add12]?>'<? if ($Take_value[user_add12]=="<?=$Take_value[user_add12]?>") echo "selected"; ?>><?=$Take_value[user_add12]?></option>
</select>
<select name="user_add17" id="combo_2" onChange="change(this);" style="width:90px; color:#5184CD; " class=write_input_select >
  <option value='<?=$Take_value[user_add17]?>'<? if ($Take_value[user_add17]=="<?=$Take_value[user_add17]?>") echo "selected"; ?>><?=$Take_value[user_add17]?></option>
</select>
<select name="user_add22" id="combo_3" onChange="change(this);" style="width:255px; color:#5184CD; " class=write_input_select >
  <option value='<?=$Take_value[user_add22]?>'<? if ($Take_value[user_add22]=="<?=$Take_value[user_add22]?>") echo "selected"; ?>><?=$Take_value[user_add22]?></option>
</select>
  </td>
</tr>
 
<script language="JavaScript" type="text/javascript">
<!--
// first combo box
   data_1 = new Option("대우", "대우");
   data_2 = new Option("현대", "현대");
   data_3 = new Option("기아", "기아");
   data_4 = new Option("쌍용", "쌍용");
   data_5 = new Option("아우디", "아우디");
   data_6 = new Option("뻰츠", "벤츠");
// second combo box
   data_1_1 = new Option("대우차", "대우차");
   data_1_2 = new Option("대우차2", "대우차2");
   data_1_3 = new Option("대우차3", "대우차3");
   data_2_1 = new Option("현대차", "현대차");
   data_2_2 = new Option("현대차2", "현대차");
   data_2_3 = new Option("23", "--");
   data_2_4 = new Option("24", "--");
   data_2_5 = new Option("25", "--");
// third combo box
   data_1_1_1 = new Option("승용", "승용");
   data_1_2_1 = new Option("SUV", "SUV");
   data_1_3_1 = new Option("기타1", "기타1");
   data_1_3_2 = new Option("기타2", "기타2");
   data_1_4_1 = new Option("기타", "기타");
   data_1_4_2 = new Option("기타2", "기타2");

   data_2_1_1 = new Option("211", "**");
   data_2_1_2 = new Option("212", "**");
   data_2_2_1 = new Option("221", "**");
   data_2_2_2 = new Option("222", "**");
   data_2_3_1 = new Option("231", "***");
   data_2_3_2 = new Option("232", "***");
// fourth combo box
   data_1_1_1_1 = new Option("1111","1111")
   data_1_2_1_1 = new Option("1211","1211")
   data_1_3_1_1 = new Option("1311","1311")
   data_1_3_2_1 = new Option("1321","1321")
   data_1_3_3_1 = new Option("1331","1331")
   data_1_3_4_1 = new Option("1341","1341")
   data_1_4_1_1 = new Option("1411","1411")
   data_1_4_2_1 = new Option("1421","1421")
   data_1_4_3_1 = new Option("1431","1431")
   data_1_4_4_1 = new Option("1441","1441")
   data_1_5_1_1 = new Option("1511","1511")
   data_1_5_2_1 = new Option("1521","1521")
   data_1_5_3_1 = new Option("1531","1531")
   data_1_5_4_1 = new Option("1541","1541")
   data_1_6_1_1 = new Option("1611","1621")
   data_1_6_2_1 = new Option("1621","1621")
   data_1_6_3_1 = new Option("1631","1631")
   data_1_6_4_1 = new Option("1641","1641")
   data_2_2_1_1 = new Option("2211","%")
   data_2_2_1_1 = new Option("2211","%")
   data_2_2_1_2 = new Option("2212","2212")
// other parameters
   displaywhenempty="-선택없음-"
   valuewhenempty=""
   displaywhennotempty="- 항목선택↓  -"
   valuewhennotempty=""

function change(currentbox) {
   numb = currentbox.id.split("_");
   currentbox = numb[1];
   i=parseInt(currentbox)+1
// I empty all combo boxes following the current one
   while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
          (document.getElementById("combo_"+i)!=null)) {
        son = document.getElementById("combo_"+i);
        // I empty all options except the first one (it isn't allowed)
        for (m=son.options.length-1;m>0;m--) son.options[m]=null;
        // I reset the first option
        son.options[0]=new Option(displaywhenempty,valuewhenempty)
        i=i+1
   }

// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill
   stringa='data'
   i=0
   while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
          (document.getElementById("combo_"+i)!=null)) {
          eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
          if (i==currentbox) break;
          i=i+1
   }

// filling the "son" combo (if exists)
   following=parseInt(currentbox)+1
   if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
      (document.getElementById("combo_"+following)!=null)) {
      son = document.getElementById("combo_"+following);
      stringa=stringa+"_"
      i=0
      while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {
      // if there are no options, I empty the first option of the "son" combo
      // otherwise I put "-select-" in it
            if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
                if (eval("typeof("+stringa+"1)=='undefined'"))
                   eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
                else
                eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
         else
             eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
         i=i+1
      }
      //son.focus()
      i=1
      combostatus=''
      cstatus=stringa.split("_")
      while (cstatus[i]!=null) {
         combostatus=combostatus+cstatus[i]
         i=i+1
         }
      return combostatus;
   }
}
//-->
</script>
 
       
아이슬
2007-10-09 01:22
 응용가치가 높습니다. 소중한자료공개해주신 휘앙새님 감사합니다.
     
부리부리
2007-10-10 07:09
 유용한 자료업 감사합니다 ^^;
     
임플란투어
2007-10-27 18:06
 고마운 자료네요
     
거룩한밤
2007-11-21 09:10
 휘앙새님 자료 감사합니다. 그런데, 이 코드를 활용하려고
write.php에 복사해서 넣어보니 정상작동 안하더라구요..
user_add셀은 관리자모드에서 다 만들어 놓은 상태에서 하였습니다.
어찌해야 정상작동이 될까요?
휘앙새 카테고리 자동생성부분 죽여야지요~
아래부분을 저렇게 죽이면 양식을 마음대로 바꿀수가 있지요
=========================================================
<!--입력항목 추가 생성(폼필드) 해당부분 출력 : 보드설정-[6-16]-[<?= $wvalue ?>] -->
<!---
<tr>
<td class=write_left_td><?=$Write_add_array[0]?></td>
<td class=write_check_td><img src="<?=$this_skin.'/b_img/icons/'.$Write_add_array[1]?>"></td>
<td class=write_right_td><?=$Write_add_array[2]?></td>
</tr>
--->
 12/21 17:52
     
TECHSTAR
2009-07-12 15:44
 이것을 db에서 불러와서 처리하려면..즉, 제조사명 게시판,제조사명에 따른 제품게시판으로 해서 처리하려면 어떻게 해야할까요 ? 위에 예제는 고정이지만, 이걸 DB에서 불러와서 처리한다면 무한대로 활용할 수있을꺼 같은데.. 즉, 삼성이라는 제조사명을 누르면, 제조사명 테이블에서 제조사코드를 가지고 올것이고, 다시 다른 게시판에서 이 제조사코드로 된 제품명을 선택하게 한다면 말입니다. 물론 이 데이타들은 각각의 코드로 등록되는거구요.
     
휘앙새
2010-09-10 23:51
회원사진 		만들면 되죠. 특별히 만들 동기가 있으면.
     
카스랑
2011-12-03 18:31
회원사진 		휘앙새님 감사합니다. 대단하세요
     
  0
3500
FILE #1 .
FILE #2 .
FILE #3 .
FILE #4 .
FILE #5 .
FILE #6 .
FILE #7 .
FILE #8 .
FILE #9 .
FILE #10 .
윗글 통합검색에서 한글자(1자) 검색 가능하게
아래글 [테크샵 택배등록 코너] EMS 국제특급용 행방조회 주소
1191 모바일 모바일웹에서 스마트폰에 바로가기 아이콘 생성하기 [1] TECHSTAR 2018-11-03
1190 네이버 짧은 주소 api [3]+3 신홍 2018-06-23
1189 글 복사할 때 출처 표시하기 [3] 신홍 2018-06-11
1188 이모티콘 제거방법 [1] 신홍 2018-05-31
1187 페이스북 공유시 사진이 안보일 경우 [1] techwear 2017-05-06
1186 방문자의 익스플로러 버전 체크해주는 소스입니다 [2] 신홍 2017-03-07
1185 모바일 웹.. 아이폰, 아이패드 iwindow 레이어 문제 해결 [3]+1 신홍 2017-02-12
1184 모바일에서 주소복사 기능 [2] 신홍 2017-02-10
1183 모바일 [무료모바일프로그램]안드로이드 스튜디오 [4] 작은소망 2017-01-25
1182 게시판에 효율적으로 광고를 하려면... [1] 신홍 2017-01-04
1181 수정 올더게이트 통신 IP 변경 안내 모두모두 2016-12-05
1180 쇼핑몰 회원 장바구니 유지하기 [1] 기즈모SOFT 2016-12-05
1179 수정 커스터마이징된 파일첨부 필드에서 파일 삭제방법 [2] TECHSTAR 2016-10-17
1178 네이트 팀룸으로 메시지 전송~ [2]+2 Terrorboy 2016-09-20
1177 수정 특정 변수값의 한글이 깨질때 사용-삭제 모두모두 2016-09-05
1176 댓글 목록 제한 스크립 추가시 생기는 제한 [1] cherryboyz 2016-07-21
1175 푸시불렛 소스 [2]+4 Terrorboy 2016-06-30
1174 응용 게시물의 날짜 및 시간 변경 [2] 모두모두 2016-05-31
1173 수정 0(제로) 검색 [1] 기즈모SOFT 2016-05-09
12345678910,,,63