JavaScript

멀티 select 만들기

Zyss 2015. 3. 2. 14:02
반응형


<select name="user_add9" id="combo_0" onChange="change(this)" style="width:80px; color:#5184CD; " class=write_input_select >
  <option >선택하시오</option>
 <option value='스틸'>스틸</option>
 <option value='스테인리스'>스테인리스</option>
</select>
<select name="user_add12" id="combo_1" onChange="change(this)" style="width:150px; color:#5184CD;" class=write_input_select ></option>
</select>
<select name="user_add17" id="combo_2" onChange="change(this);" style="width:90px; color:#5184CD; " class=write_input_select ></option>
</select>

 

<script language="JavaScript" type="text/javascript">
<!--

// first combo box

  data_1 = new Option("스틸", "스틸");
  data_2 = new Option("스테인리스", "스테인리스");

 

// second combo box

  data_1_1 = new Option("Steel-CR", "Steel-CR");
  data_2_1 = new Option("Stainless Steel-301", "Stainless Steel-301");
  data_2_2 = new Option("Stainless Steel-316", "Stainless Steel-316");


// third combo box

  data_1_1_1 = new Option("1.0T", "1.0T");
  data_1_1_2 = new Option("1.2T", "1.2T");
 
  data_2_1_1 = new Option("1.0T", "1.0T");
  data_2_1_2 = new Option("1.2T", "1.2T");

  data_2_2_1 = new Option("1.0T", "1.0T");
  data_2_2_2 = new Option("1.2T", "1.2T");

 


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

반응형