네이버나 웹에 떠도는 3단콤보 소스 중에 잴 깔끔했던 소스입니다.

그런데 value와 text에 대한 구분이 모호한게 흠이었죠...


보통 3단콤보의 로직은 디비와 연동하여 value, text 값이 존재하게 되는데..

앞으로 계속 개발하는데 써먹을 수 있도록 소스를 수정하였습니다.




<html>
<head>
<title>Dynamic Select Form Sample</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<script language="javascript">
<!--

 function Category(value, text) {
  this.value = value;
  this.text = text;
  this.length = 0;
 }

 function addCategory(category, value, text) {
  category[category.length] = new Category(value, text);
  category.length++;
 }

 var category = new Category();
 
 addCategory(category,"macure set", "macure set");
  addCategory(category[0], "package", "package");
 
 addCategory(category, "manicare", "manicare");
  addCategory(category[1], "implement", "implement");
   addCategory(category[1][0], "nail", "nail");
   addCategory(category[1][0], "ttweezer", "ttweezer");
   addCategory(category[1][0], "scissors", "scissors");
   addCategory(category[1][0], "pusher cleaner and knife", "pusher cleaner and knife");
   addCategory(category[1][0], "trimmer", "trimmer");
   addCategory(category[1][0], "nail clipper", "nail clipper");
   addCategory(category[1][0], "nail nipper", "nail nipper");
   addCategory(category[1][0], "emery boards", "emery boards");
   addCategory(category[1][0], "buffer", "buffer");
   addCategory(category[1][0], "ear pick", "ear pick");
   addCategory(category[1][0], "multi useful kits", "multi useful kits");
 
  addCategory(category[1], "artificial nail", "artificial nail");
 
 addCategory(category, "pedicure item", "pedicure item");
  addCategory(category[2], "pumice stone", "pumice stone");
   addCategory(category[2][0], "natural", "natural");
   addCategory(category[2][0], "atrtificial", "atrtificial");
   addCategory(category[2][0], "ceramic", "ceramic");
   addCategory(category[2][0], "sponge", "sponge");
 
  addCategory(category[2], "foot file", "foot file");
   addCategory(category[2][1], "emery", "emery");
   addCategory(category[2][1], "metalic", "metalic");
   addCategory(category[2][1], "laser", "laser");
   addCategory(category[2][1], "ceramic", "ceramic");
   
  addCategory(category[2], "toe separator", "toe separator");
  addCategory(category[2], "toe nail clipper", "toe nail clipper");


 function initForm(form) {
  form.subject.length = category.length;

  for (i = 0; i < category.length; i++){
   form.subject[i].value = category[i].value;
   form.subject[i].text = category[i].text;
   form.subject.selectedIndex = 0;
   form.contents.selectedIndex = 0;
  }
 
  change_subject(form);
 }
 
 function change_subject(form) {
  var i = form.subject.selectedIndex;
  form.contents.length = category[i].length;
 
  for (j = 0; j < form.contents.length; j++){
   form.contents[j].value = category[i][j].value;
   form.contents[j].text = category[i][j].text;
   form.contents.selectedIndex = 0;
  }
  change_contents(form);
 }
 
 function change_contents(form) {
  var i = form.subject.selectedIndex
  var j = form.contents.selectedIndex;
 
  form.components.length = category[i][j].length;
 
  for (k = 0; k < form.components.length; k++){
   form.components[k].value = category[i][j][k].value;
   form.components[k].text = category[i][j][k].text;
   form.components.selectedIndex = 0;
  }
 }
 
 function change_compo(){
  var l = document.form.components.selectedIndex;
  alert("value >>"+document.form.components[l].value);
  alert("text >>"+document.form.components[l].text);
 }
 
 
 

// -->
</SCRIPT>
</head>

<body onLoad="initForm(document.form)">

 <h1>3단 동적 셀렉트 박스 예제</h1>
 
 <form name="form" method="get" action="#">
  <select name="subject" onchange="change_subject(this.form)"></select>
  <select name="contents" onchange="change_contents(this.form)"></select>
  <select name="components" onChange="change_compo();"></select>
 </form>

</body>
</html>

신고

'☆Develpoer > └ HTML/Script' 카테고리의 다른 글

selectbox 선택시 페이지 이동하기  (1) 2007.05.02
SelectBox  (0) 2007.05.02
Dynamic Select Form Sample(3단 SelectBox)  (1) 2007.05.02
자바스크립트에서 쿠키지우기  (0) 2007.05.02
카운트후 창 닫기  (1) 2007.05.02
naver 포털 쓸만한 스크립트들  (0) 2007.05.02
  1. used car loan quote 2008.03.13 05:45 신고

    여보세요, 아주 좋은 위치!

+ Recent posts