Cara Mendeteksi Pilihan Pada Combobox dengan Jquery

Hari ini saya mempunyai sebuah kendala tentang combobox, masalah tersebut adalah saya belum bisa mendeteksi nilai dari combobox secara langsung.

Kalau saya menggunakan java biasanya menemukannya di google dengan kata kunci getselecteditem combobox.

Akan tetapi ketika saya mencoba melakukannya di bahasa php, ternyata agak sulit dan harus reload halaman, kan saya tidak seberapa suka hehehe....

Akhirnya masalah tersebut terselesaikan karena ada javascript, lebih tepatnya pakai Jquery. Jquery dapat membantu dalam menangani pergantian html dan css secara realtime tanpa reload halaman.

Sebelum saya tunjukkan bagaimana caranya, saya akan curhatkan dulu masalah combobox yang saya alami.

Saya ingin membuat form input data pengguna yakni dosen dan mahasiswa, form input ini menjadi satu dalam satu halaman.

Nah di salah satu input terdapat combo box, combobox tersebut adalah status atau jabatan. Jika pilihannya adalah dosen maka tidak ada semester, akan tetapi jika pilihannya adalah mahasiswa maka akan di tampilkan input semester.

Gambarnya dibawah ini :

Disitu ada status yang dipilih, kasusnya ini sebenarnya lebih tepatnya di sistem manajamen laboratorium.

Di status ada dosen berupa kepala lab dan dosen pengampu matkul praktikum dan juga ada mahasiswa yang berupa aslab, asprak, dan praktikan.

Seperti yang saya katakan tadi jika pilihan pengguna adalah dosen maka status tidak muncul seperti gambar di bawah ini.

Jika memilih mahasiswa maka status muncul seperti berikut ini :

Lalu bagaimana cara mendapatkan nilai atau value dari combobox tersebut.

Caranya sebagai berikut:

1. Tambahkan code jquery berikut diatas head.

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

2. Beri id pada combobox, terserah mau di namai apa, contoh punya saya beri nama joko pada idnya.

3. Beri id juga objek yang ingin kita tampilkan dan disembunyikan, dalam contoh ini saya akan menampilkan label dan input jika terpilih pengguna mahasiswa.

4. Setelah itu buat script javascriptnya dengan Jquery.

<script type="text/javascript">
    $(document).ready(function(){
    $("#joko").change(function(){
        var kodingbagus = $(this).children("option:selected").val();
        if(kodingbagus=="Kepala Laboratorium" || kodingbagus=="Dosen Pengampu Matkul"){
            $("#semester").hide(1000);
            $("#label1").hide(1000);
           }else {
            $("#semester").show(1000);
            $("#label1").show(1000);
           }

    });
  });
    </script>

Letakkan script berikut di atas </head>

Silahkan di coba ke projek kalian, sangat menarik bukan, saya berencana untuk mengeksplor lebih jauh tentang Jquery.

Selamat mencoba dan semoga bermanfaat.

Share :