Putu Adi — Bekerja & Berkarya

Cara Ambil Nilai Element HTML Select, Bukan Value, Tapi Textnya

Ditulis oleh : Putu Adi, 26 Januari 2024

Kronologi

Saya sedang ngerjain project ERP (Enterprise Resource Planning), dan menemukan kasus unik, dimana pada fitur yang sedang saya buat kali ini, mengharuskan saya mengambil nilai dari element select. Bukan isi valuenya, tetapi isi text yang dipilih. Contohnya begini.

Dibawah ini, ada sebuah elemen select, dengan 3 pilihan. Nah perhatikan di bagian valuenya. Contoh untuk Pcs, disana valuenya 4000. Pcs mewakili satuannya, sedangkan 4000 mewakili harganya.

Jadi untuk produk ini, per pcsnya, harganya 4000. dan untuk satuan Bal, harga per bal nya 12000, terakhir, 1 Box harganya 40000.

<label for="satuanProduk">Satuan Produk:</label>
<select id="satuanProduk">
  <option value="4000">Pcs</option>
  <option value="12000">Bal</option>
  <option value="40000">Box</option>
</select>

Masalah

Nah kalau dengan sistem penyeimpanan normal, menggunakan metode $_POST di php. Jika dari 3 opsi, kita pilih satuannya.

  <option value="4000">Pcs</option>

Misalnya adalah Pcs, maka saat kita simpan, nilai yang kita dapatkan adalah sesuai isi dari valuenya, yaitu 4000, bukan Pcs.

Nah sampai saat ini saya belum tau cara mendapatkan nilai textnya yaitu “Pcs”. Dengan perintah php standar.

Solusi

Dari pada makin botak, saya akali dengan Javascript aja dengan membuat satu input baru bernama “mirror”, yang fungsinya memirroring atau menangkap nilai dari text si <select> satuanProduk secara realtime, saat ada perubahan di select satuanProduk, akan langsung di kirim isi textnya ke input mirror.

Nanti hasil mirroring dari input “mirror” inilah yang saya simpan. Bukan nilai dari si <select> satuanProduk ini. Tapi si input “mirror” ini saya hide (dengan type=”hidden”), agar tidak mengganggu estetika.

Jadi contoh penerapannya seperti ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real-time Mirror</title>
</head>
<body>
    <label for="satuanProduk">Satuan Produk:</label>
    <select id="satuanProduk" onchange="updateMirror()">
        <option value="4000">Pcs</option>
        <option value="12000">Bal</option>
        <option value="40000">Box</option>
        <!-- Tambahkan opsi lain jika diperlukan -->
    </select>
    <br>
    <label for="mirror">Mirror:</label>
    <input type="text" id="mirror" readonly>
    <script>
        function updateMirror() {
            // Mengambil elemen select berdasarkan id
            var selectSatuanProduk = document.getElementById("satuanProduk");

            // Mengambil nilai teks yang dipilih pada select
            var nilaiTeksPilihan = selectSatuanProduk.options[selectSatuanProduk.selectedIndex].text;

            // Mengambil elemen input mirror berdasarkan id
            var inputMirror = document.getElementById("mirror");

            // Menetapkan nilai input mirror dengan nilai teks yang dipilih pada select
            inputMirror.value = nilaiTeksPilihan;
        }
    </script>
</body>
</html>

Lihat demonya disini

Demo

Salam Berkarya!
Putu Adi.