Membuat Multi Level Option Select Drop Down Dynamic Pakai Javascript

Apa itu Drop Down Dynamic?
Drop down Dynamic yaitu sebuah opsi/ pilihan yang memiliki anak atau bagian tertentu yang lebih spesifik.

Hampir sama dengan Drop Down Sub Menu header blogspot. Namun untuk dynamic tidak menggunakan href, melainkan value

Sebagai contoh, silahkan lihat demo dibawah ini

Anda dapat mengatur atau menentukan berapa jumlah sub option, karena sepengatuhan saya jumlahnya tidak dibatasi.

Pada contoh diatas saya hanya menggunakan tiga level.
Untuk melihat level ketiga, silahkan pilih SMP kemudian SMP N 1 Pelepat Ilir

Berikut kode-kode yang diperlukan

<script language="JavaScript" type="text/javascript">
// "Membuat Skripsi" adalah Tampilan Judul pada Option. Sedangkan "membuat-skripsi" adalah Value-nya
data_1_1 = new Option("Membuat Skripsi", "membuat-skripsi"); // data_1_1 adalah OPTION kedua
data_1_2 = new Option("Libur Kuliah", "libur-kuliah");
data_2_1 = new Option("Lulus SMA", "lulus-sma");
data_2_2 = new Option("Putus SMA", "putus-sma");
data_2_3 = new Option("Baru Masuk SMA", "baru-masuk-sma");
data_3_1 = new Option("Tamatan SMP", "tamatan-smp");
data_3_2 = new Option("SMP N 1 Pelepat Ilir", "sma-pelepat");
data_3_2_1 = new Option("Saya Anggota", "saya-anggota"); // data_3_2_1 adalah OPTION ketiga
data_3_2_2 = new Option("Saya Bukan Anggota", "saya-bukan-anggota");
// other parameters
    displaywhenempty="Tidak ada sesuatu disini"
    valuewhenempty=""
    displaywhennotempty="Pilihan selanjutnya"
    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(\"Kangsigit_"+i+"\"))!='undefined'")) &&
           (document.getElementById("Kangsigit_"+i)!=null)) {
         son = document.getElementById("Kangsigit_"+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 ("KS_option"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill

    KS_option='data'
    i=0
    while ((eval("typeof(document.getElementById(\"Kangsigit_"+i+"\"))!='undefined'")) &&
           (document.getElementById("Kangsigit_"+i)!=null)) {
           eval("KS_option=KS_option+'_'+document.getElementById(\"Kangsigit_"+i+"\").selectedIndex")
           if (i==currentbox) break;
           i=i+1
    }

// filling the "son" combo (if exists)
    following=parseInt(currentbox)+1
    if ((eval("typeof(document.getElementById(\"Kangsigit_"+following+"\"))!='undefined'")) &&
       (document.getElementById("Kangsigit_"+following)!=null)) {
       son = document.getElementById("Kangsigit_"+following);
       KS_option=KS_option+"_"
       i=0
       while ((eval("typeof("+KS_option+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("+KS_option+"0)=='undefined'"))
       if (eval("typeof("+KS_option+"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("+KS_option+i+".text,"+KS_option+i+".value)")
     i=i+1
  }
       //son.focus()
       i=1
       combostatus=''
       cstatus=KS_option.split("_")
       while (cstatus[i]!=null) {
          combostatus=combostatus+cstatus[i]
          i=i+1
          }
       return combostatus;
    }
}
</script>

<!-- OPSI PERTAMA -->
<select name="optionPertama" id="Kangsigit_0" onChange="change(this);">
<option value=" ">Silahkan Pilih</option>
<option value=" ">Kuliah</option>
<option value=" ">SMA/ Sederajat</option>
<option value=" ">SMP</option>
</select>

<!-- OPSI KEDUA -->
<select name="optionKedua" id="Kangsigit_1" onChange="change(this)"></select>

<!-- OPSI KETIGA -->
<select name="optionKetiga" id="Kangsigit_2" onChange="change(this)"></select>
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini