Membuat Dynamic Combo Box Dengan Jquery, Select dan Multiple Select

Pertanyaan tentang bagaimana ya caranya ketika kita pilih option A maka pada kotak pilihan yang kedua akan keluar option 1,2,3. Lalu saat kita pilih option B maka pada kotak pilihan kedua akan keluar option 4,5,6.

Jawabannya berbagai macam cara dapat dilakukan mulai dengan menggunkan database hingga array pada jquery. Pada postingan kali kita menggunakan jquery untuk mempercepat proses antar select box dan dapat juga disimpan ke database.

Logika untuk programnya sebagai berikut :

• Membuat dua buah combo box / select / pilihan. Pada postingan ini diterapkan dalam kasus fakultas dan program studi. Tidak lupa memasangkan id pada setiap combo box.

• Lalu menambahkan button simpan dan juga lengkap dengan id nya.

• Saat combo box terpilih maka pada javascript akan memanggil option untuk combo box yang kedua sesuai dengan value dari combox pertama dengan beberapa penambahan logika if else.

• Setelah combo box kedua juga sudah terselect lalu lanjut dengan klik button simpan atau submit untuk menyimpan data atau menampilkannya.

• Jika ingin menyimpan datanya dapat menggunakan ajax, namun di postingan ini hanya menampilkan data dan untuk trik menyimpan dengan ajax, silahkan hubungi admin pada contact, agar di buatkan postingan simpan data dengan ajaxnya.

Setelah memahami logika diatas, selanjutnya menerapkan pada script.

Dimulai dengan dua buah combo box atau select dan juga button submit. Berikut scriptnya :

<div class="panel-body">

            <div class="col-md-6">

                                <div class="form-group">

                                    <label>Selects Fakultas</label>

                                    <select class="form-control" onchange="showDiv(this)" id="fakul">

                                        <option value="Pilih Fakultas">Pilih Fakultas</option>

                                        <option value="Komputer">Komputer</option>

                                        <option value="Teknik">Teknik</option>

                                        <option value="Sastra">Sastra</option>

                                        <option value="Pendidikan">Pendidikan</option>

                                    </select>

                                </div>                             

                                <div class="form-group">

                                    <label>Selects Prodi</label>

                                    <select class="form-control prodi" >

                                        <option>Pilih Prodi</option>

                                    </select>

                                </div>                             

                                <button type="submit" class="btn btn-primary simpan">Submit Button</button>

                                <button type="reset" class="btn btn-default">Reset Button</button>

            </div>

            <div class="col-md-6" id="hasil">

            </div>

</div>

Lalu javascript untuk pemilihan data pertama yang akan efek ke pemilihan data kedua lengkap dengan logika if else.  Berikut scriptnya :

<script type="text/javascript">

            function showDiv(elem){

        if(elem.value == 'Komputer'){

            $('.prodi').html('<option>Pilih Prodi</option><option>Teknik Informatika</option><option>Sistem Informasi</option>')               
}
        else if(elem.value == 'Teknik'){

            }  
$('.prodi').html('<option>Pilih Prodi</option><option >Teknik Elektro</option><option >Teknik Listrik</option>')               
        else if(elem.value == 'Sastra'){

            $('.prodi').html('<option>Pilih Prodi</option><option>Bahasa</option><option>Budaya</option><option>Anak Usia Dini</option>')          
$('.prodi').html('<option>Pilih Prodi</option><option>Indonesia</option><option>Inggris</option>')             
            }
        else if(elem.value == 'Pendidikan'){
            }
        else{
            $('.prodi').html('<option>Pilih Prodi</option>')               
            }

    </script>

    }

Penambahan javascript untuk button simpan atau submit. Pada hal ini tanpa ajax, jadi hanya menampilkan html nya. Berikut scriptnya :

<script type="text/javascript">

      $(".simpan").click(function(){

      var fakultas =  $("select#fakul").val();

      var prodi =  $("select.prodi").val();

      $('#hasil').html('<div class="form-group has-success"><label>Hasil Fakultas</label><input class="form-control"  value="'+fakultas+'"></div><div class="form-group has-success"><label>Hasil Prodi</label><input class="form-control"  value="'+prodi+'"></div>')

                });

    </script>

Semoga bermanfaat bagi rekan rekan programmer website, jika ada kendala dalam penerapam script . 

• Tweet
• Share
• Share
• Share
• Share