JQuery Case: Meload Konten Ke dalam Select Form Hasil dari Pemilihan Select Form Sebelumnya

Salam, kita akan kembali membahas tutorial ajax, atau teknik ajax yang lainnya.

Kali ini pembahasan lebih kepada studi kasus yang biasanya hampir ada di setiap aplikasi berbasis website. Baik itu menggunakan database maupun tidak.

Seperti apa kasusnya? Kita akan bahas saat ini juga.

Pernahkah Anda bertemu dengan form isian yang mengharuskan Anda memilih option berbentuk form dropdown, yang ketika Anda memilih form dropdown tersebut mempengaruhi isi dari form drop down selanjutnya.

Seperti apa contohnya?

Saya akan ambil contoh kasus website karya kawan lama yakni Brilianth, yang sebelumnya telah menulis beberapa artikel di ilmuwebsite magz v1, yakni brilianth a.k.a peterpanz yakni mangpulsa.com.



Jika dilihat pada form di atas, Anda belum bisa memilih jenis provider jika Anda belum memilih jenis produk pada form pilihan sebelumnya. Namun jika Anda telah memilih jenis produk, maka pastinya Anda sudah langsung bisa memilih jenis providernya.

Lalu bagaimana cara kerjanya, algoritma dan kode di balik itu semua? Itu yang akan kita bahas selengkapnya.

Ada beberapa macam solusi yang bisa Anda gunakan, mulai dari menggunakan dom biasa, hingga menggunakan ajax yang mengambil data dari suatu url. Untuk pembahasan kali ini kita hanya akan menggunakan DOM Java Script saja, menggunakan JQuery.

Script lengkapnya sebagai berikut :
 <html>
  <head>
   <title>DOM AJAX</title>
   <style type="text/css">
    label{
     display:inline-block;
     width:100px;    
    }
    
    select{
     padding:10px;
     margin:0 0 10px 0;
     width:200px;
    }
    
    input[type="submit"]{
     padding:10px;
     width:200px;
     margin-left:100px;
    }
    
    h3.harga{
     display:inline-block;
    }
   </style>
  </head>
  <body>
   <h1>Form Beli/Order</h1>
   <label>Jenis Provider</label><select name="provider" id="provider"><option>Pilih Provider</option></select><br />
   <label>Produk</label><select name="produk" id="produk"><option>Pilih Produk</option></select><br /> 
   <label>Nominal</label><select name="nominal" id="nominal"><option>Pilih Nominal</option></select><br />
   <label>Harga</label><h3 class="harga">Rp 0</h3><br />
   <input type="submit" name="kirim" value="Kirim!" />
     
   <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
   <script type="text/javascript">
    $(document).ready(function(){
     
     /* persiapkan terlebih dahulu array berbentuk 
     objek sesuai dengan kebutuhan*/
     var obj = {
      'Pulsa Telepon' : {
       'AS' : {
          'AS 5000' : '6425',
          'AS 1000' : '11500'
        },
       'AXIS' : {
          'AXIS 5000' : '6100',
          'AXIS 1000' : '11800'
        }
      },
      'Token PLN' : {
       'PLN Prabayar' : {
          'Voucher PLN 20000' : '19600',
          'Voucher PLN 25000' : '24600'
        }
      }
     };
     
         
     /* hapus isi option provider, 
     hal ini digunakan sebagai antisipasi duplikasi 
     isi/nilai dari option si provider nantinya */
     $('#provider option').remove();
     
     /* tambahkan ke dalam provider pilihan Pilih Provider */
     $('#provider' ).append('<option value="">Pilih Provider</option>');
     
     /* ambil isi dari obj kemudian keluarkan dengan looping */
     jQuery.each( obj, function( i, val ) {
      $('#provider' ).append('<option value="'+i+'">'+i+'</option>');
     });   
     
     
     /* jika provider dipilih */
     $('#provider').change(function(){
      var valprovider = $(this).val();
      $('h3.harga').html('Rp 0');
          
      /* hapus isi option produk, 
      hal ini digunakan sebagai antisipasi duplikasi 
      isi/nilai dari option si produk nantinya */
      $('#produk option').remove();
      
      $('#produk' ).append('<option value="">Pilih Produk</option>');
      jQuery.each( obj[valprovider], function( i, val ) {
       $('#produk' ).append('<option value="'+i+'">'+i+'</option>');
      });      
     });
     
     
     /* jika produk dipilih */
     $('#produk').change(function(){ 
      var valproduk = $(this).val();
      var valprovider = $('#provider').val(); 
      $('h3.harga').html('Rp 0');     
      
      /* hapus isi option nominal, 
      hal ini digunakan sebagai antisipasi duplikasi 
      isi/nilai dari option si nominal nantinya */
      $('#nominal option').remove();
      $('#nominal' ).append('<option value="">Pilih Nominal</option>');
      jQuery.each( obj[valprovider][valproduk], function( i, val ) {
       $('#nominal' ).append('<option value="'+i+'">'+i+'</option>');
      }); 
      
     });
     
     
     $('#nominal').change(function(){     
      var valnominal = $(this).val();
      var valprovider = $('#provider').val(); 
      var valproduk = $('#produk').val();     
      
      /* di reset jadi nol */
      $('h3.harga').html('Rp '+obj[valprovider][valproduk][valnominal]);
      
     });
        
    });
          
   </script>
  </body>
 </html>

Untuk demo silahkan klik http://www.ilmuwebsite.com/tutorial/jquery/trigger/

Semoga bermanfaat,

Loka Dwiartara
Founder KaffahBiz
Founder ICC
Admin Ilmuwebsite.com

DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0838 1157 5876, atau bisa pesan secara online di sini)

Admin Ilmuwebsitecom

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

1 komentar:

  1. Opsi "pilih produk" pas di awal kosong kang? Gimana

    BalasHapus