Pemrograman

Bahasa

Framework

Peralatan

Info

Memindahkan Nilai dari Elemen Select dengan JQuery

– 08 August 2016
Misalkan, ada sebuah input yang otomatis diisi ketika salah satu opsi pada elemen <select> dipilih. Nilainya diambil dari atribut <option>. Kurang lebih ilustrasinya seperti gambar berikut ini.
Memindahkan nilai dari elemen Select dengan JQuery
Lalu, dari mana dapat nilai lama tanam, berat, dan harga? Sedangkan kita hanya bisa menyimpan nilai pada <option> dalam atribut value. Dalam kasus ini, kita bisa mengakalinya dengan membuat atribut kostum (atribut buatan).

1. Kode HTML

Kita akan membuat sebuah elemen <select> dengan 5 opsi. Sebenarnya opsinya bisa dibuat dengan perulangan dan datanya diambil dari database. Tapi, karena kita tidak menggunakan database jadi langsung saja kita buat dalam kode.
Pilih Benih
<select id="benih">
    <option lama="6 bulan" berat="1kg" harga="Rp 45.000">Kacang</option>
    <option lama="5 bulan" berat="100kg" harga="Rp 700.000">Padi</option>
    <option lama="4 bulan" berat="2kg" harga="Rp 10.000">Semangka</option>
    <option lama="5 bulan" berat="3kg" harga="Rp 80.000">Semangka</option>
    <option lama="3 bulan" berat="4kg" harga="Rp 4.500">Timun</option>
</select>
<br>
Lama tanam <input type="text" id="lama-tanam" /><br>
Berat <input type="text" id="berat" /><br>
Harga <input type="text" id="harga" />
Pada kode diatas, kita membuat kostum atribut: lama, berat, dan harga. Atribut-atribut ini sebenarnya tidak ada dalam HTML. Lalu bagaiaman cara mengambil nilai-nilai dari kostum atribut tersebut?

2. Kode Javascript/JQuery

$("#benih").on("change", function(){

  // ambil nilai
  var lama = $("#benih option:selected").attr("lama");
  var berat = $("#benih option:selected").attr("berat");
  var harga = $("#benih option:selected").attr("harga");
  
  // pindahkan nilai ke input
  $("#lama-tanam").val(lama);
  $("#berat").val(berat);
  $("#harga").val(harga);
  
});
Ada dua hal yang dilakukan dalam kode di atas. Pertama mengambil nilai dari opsi yang terpilih. Kedua memindahkannya ke input field.

3. Demo

Petanikode - Memindahkan nilai elemen select on jsbin.com

No comments :

Post a Comment