자바스크립트

Dynamic Select Form Sample (3단 SelectBox)

은둔한량 2013. 2. 18. 15:40
반응형

<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>


 

 

반응형