author Ahmad Muhardian

Mengambil Nilai dari Select/Option dengan JQuery


Pada sebuah kasus, kita menggunakan elemen <select> dan <option> sebagai input dalam form.

Kita ingin:

Setiap opsi yang terpilih akan memberikan data yang berbeda-beda.

Misalnya kita punya form seperti ini ini:

<form>
  <select name="package" id="package">
    <option>Paket 1</option>
    <option>Paket 2</option>
    <option>Paket 3</option>
  </select>
    
  <h4>Anda memilih: <span id="selected"></span></h4>
</form>

Nah, saat kita memilih Paket, kita ingin mengambil data dari opsi yang dipilih.

Kita bisa saja melakukannya seperti ini:

$('#package').on('change', function(){
  const selectedPackage = $('#package').val();
  $('#selected').text(selectedPackage);
});

Hasilnya akan seperti ini:

Tapi..

Bukan ini sebenarnya yang kita inginkan.

Kita ingin, setiap memilih paket..

..akan muncul data harga, bukan nama paketnya.

Ilustrasinya seperti ini:

Mengambil nilai dari select/option dengan jquery

Tapi kendalanya:

Satu element select, hanya bisa menyimpan satu data.

Terus gimana donk solusinya?

Solusinya:

Pada HTML, kita bisa menyimpan data di dalam atribut dengan custom attribut data.

Contoh:

<div id="main" data-loading="true"></div>

Attribut yang diawali dengan data- adalah custom atribut yang nilainya bisa kita akses dari javascript.

Cara aksesnya seperti ini:

// jika menggunakan navtive javascript
const data = document.querySelector('#main').dataset.loading.

// sedangkan jika menggunakan JQuery
const data = $('#main').data('loading');

Mari kita coba pada kasus pemilihan paket.

Ubahlah kode HTML-nya menjadi seperti ini:

<form>
    <select name="package" id="package">
        <option data-price="100000" data-discount="10">Paket 1</option>
        <option data-price="150000" data-discount="10">Paket 2</option>
        <option data-price="200000" data-discount="10">Paket 3</option>
    </select>

    <div>
        <label for="price">Harga</label>
        <input type="text" name="price" readonly />
        <br>
        <label for="price">Discount</label>
        <input type="text" name="discount" readonly />
        <br>
        <h4>Total: <span id="total">0</span></h4>
    </div>

</form>

Kemudian ubah kode JQuery-nya menjadi seperti ini:

$('#package').on('change', function(){
  // ambil data dari elemen option yang dipilih
  const price = $('#package option:selected').data('price');
  const discount = $('#package option:selected').data('discount');
  
  // kalkulasi total harga
  const totalDiscount = (price * discount/100)
  const total = price - totalDiscount;
  
  // tampilkan data ke element
  $('[name=price]').val(price);
  $('[name=discount]').val(totalDiscount);
  
  $('#total').text(`Rp ${total}`);
});

Maka hasilnya:

Akhir Kata..

Nah, begitulah salah satu cara untuk mengambil banyak data dari elemen <select> dan <option>.

Semoga bermanfaat.

Baca Juga ini

Membuat Tab dari Nol dengan jQuery

Membuat Tab dari Nol dengan jQuery

Pada tutorial ini, kita akan belajar membuat Tab dari nol dengan JQuery. Sehingga kamu akan bisa paham algoritma di balik tab.

Belajar HTML: Cara Validasi Form di HTML agar Websitemu Lebih Aman

Belajar HTML: Cara Validasi Form di HTML agar Websitemu Lebih Aman

Validasi data itu penting! Mengapa? Karena jika kita tidak melakukan validasi, user bisa sembarangan mengisi data dan akibatnya website kita menjadi error. Dampak terburuknya: Website kita bisa diambil alih atau di-hack. Ngeri kan. Karena itu.. Jangan percaya 100% dengan data yang diinputkan user. Bisa saja itu script jahat. Nah, biar terhindar dari kejadian ini.. kita disarankan melakukan validasi sebelum data itu dikirim ke server. Dulu.. validasi data di sisi client dilakukan dengan Javascript.

Mengatasi Malsalah Posisi Titik Tengah Google Maps pada Modal

Mengatasi Malsalah Posisi Titik Tengah Google Maps pada Modal

Saat membuat Google Maps pada Modal di template Admin LTE, ada masalah yang membuat saya bingung. Posisi titik tengah Google maps selalu berada di pojok kiri atas. Meskipun saya sudah set titik tengahnya pada trigger event resize, namun tetap saja posisinya berada di pojok kiri atas. masalah sebelumnya, Google Maps tidak bisa ditampilkan karena di letakkan di dalam modal. Meskipun saya sudah set titik tengahnya pada trigger event 'resize', namun tetap saja posisinya berada di pojok kiri atas.

Mengatasi Peta (Google Map) yang tidak Ditampilkan di Modal

Mengatasi Peta (Google Map) yang tidak Ditampilkan di Modal

Ketika saya menggunakan modal untuk menampilkan peta (Google Maps), petanya tidak mau tampil. Entah mengapa? setelah ukuran layarnya di-resize, petanya bisa tampil. Mungkin karena div di dalam modal bersifat dinamis atau responsif. Peta kosong, hanya ada warna abu-abu. Solusi dari masalah ini saya temukan di Stackoverflow. MarcoK memberikan penjelasan jawaban atas masalah ini. Google Maps memang akan menampilkan area abu-abu (grey) kalau ditempatkan di elemen dinamis. Oleh karna itu, kita perlu memanggil fungsi “resize” ketika animasi modal sudah selesai.

Tutorial Google Maps API: Cara Menggunakan Info Window untuk Menampilkan Informasi

Tutorial Google Maps API: Cara Menggunakan Info Window untuk Menampilkan Informasi

Info Window adalah objek yang digunakan untuk menampilkan informasi pada suatu titik koordinat tertentu. Biasanya digunakan bersamaan dengan marker. Contoh Info Window: Info Window dapat kita isi dengan kode HTML. Sehingga data yang ditampilkan di dalam jendela Info Window bisa kita berikan style CSS agar terlihat menarik. Cara Membuat Info WindowPertama yang harus kita buat adalah isi atau informasi yang akan kita tampilkan di dalam info window.

Tutorial Google Maps API: Membuat Marker untuk Menandai Lokasi

Tutorial Google Maps API: Membuat Marker untuk Menandai Lokasi

Marker sering digunakan untuk menandai sebuah lokasi. Biasanya sering digunakan dalam membuat aplikasi Geolocation. Pada kesempatan ini, kita akan belajar membuat marker di Google Maps dan melakukan beberapa modifikasi. Kamu bisa menggunakan contoh kode sebelumnya untuk uji coba. Sudah siap? Mari kita mulai… googletag.cmd.push(function () { googletag.display('div-gpt-ad-multibanner1'); }); Mengenal Objek MarkerMarker merupakan sebuah objek yang bisa kita buat dengan kode berikut: var marker = new google.