Cara Mengisi Kembali Opsi Select HTML Tanpa Memicu Event Change dengan jQuery

Saat bekerja dengan beberapa elemen select HTML dalam aplikasi web, Anda mungkin menemukan diri Anda dalam situasi di mana memilih sebuah opsi di satu dropdown mempengaruhi opsi yang tersedia di dropdown lainnya. Skenario umum adalah membuat sebuah opsi yang tersedia di satu select menghilang ketika dipilih di yang lain. Namun, melakukan ini dapat secara tidak sengaja memicu event change yang dapat memperumit logika Anda. Dalam posting ini, kita akan membahas cara mengisi kembali opsi select secara dinamis tanpa memicu event change yang tidak diinginkan menggunakan jQuery.

Masalah

Bayangkan Anda memiliki dua dropdown (elemen select) yang saling bergantung. Anda ingin menerapkan sistem di mana memilih sebuah opsi di satu dropdown menghapus opsi tersebut dari dropdown kedua, memastikan bahwa pengguna tidak bisa memilih opsi yang sama dari keduanya. Namun, dengan perilaku default jQuery, mengubah opsi di satu select juga memanggil event change untuk select tersebut, yang bisa menyebabkan perilaku yang tidak terduga dalam aplikasi Anda.

Contoh Skenario

Berikut adalah struktur HTML sederhana untuk mengilustrasikan dropdown:

<select id="one">
  <option value="1">satu</option>
  <option value="2">dua</option>
  <option value="3">tiga</option>
</select>
<select id="two">
  <option value="1">satu</option>
  <option value="2">dua</option>
  <option value="3">tiga</option>
</select>

Ketika Anda memilih “satu” dari dropdown pertama (#one), tujuannya adalah untuk menghapus “satu” dari dropdown kedua (#two). Jika kemudian Anda memilih “dua” dari #two, perilaku yang sama harus terjadi dalam arah sebaliknya.

Solusi

Untuk menghindari pemicu event change saat mengisi kembali opsi di select Anda, Anda akan membutuhkan pendekatan dua langkah: memutus sementara handler event dan menggunakan sebuah flag untuk menentukan apakah event change harus diproses.

Langkah 1: Modifikasi Logika JavaScript

Mulailah dengan mengatur fungsi jQuery Anda sebagai berikut:

$(function () {
    var $one = $("#one");
    var $two = $("#two");

    var selectOptions = [ 
        $("option", $one).clone(), 
        $("option", $two).clone() 
    ];

    var isChanging = false; // Flag untuk mencegah pemicu event change

    $one.change(function () {
        if (isChanging) return; // Abaikan jika sudah dalam proses perubahan
        
        isChanging = true; // Atur flag sebelum mengubah opsi
        var selectedValue = $("option:selected", this).val();
        $two.find("option[value='" + selectedValue + "']").remove();
        repopulateOptions($two, selectOptions[1]); // Pulihkan opsi
        isChanging = false; // Reset flag
    });
    
    $two.change(function () {
        if (isChanging) return; // Abaikan jika sudah dalam proses perubahan
        
        isChanging = true; // Atur flag sebelum mengubah opsi
        var selectedValue = $("option:selected", this).val();
        $one.find("option[value='" + selectedValue + "']").remove();
        repopulateOptions($one, selectOptions[0]); // Pulihkan opsi
        isChanging = false; // Reset flag
    });

    function repopulateOptions($select, options) {
        options.each(function() {
            if (!$select.find("option[value='" + this.value + "']").length) {
                $select.append(this); // Tambahkan hanya jika belum ada
            }
        });
    }
});

Langkah 2: Penjelasan Komponen Kunci

• Flag isChanging: Flag boolean ini melacak apakah handler event harus dieksekusi atau diabaikan, mencegah pemicu event yang tidak sengaja selama manipulasi opsi.
• Fungsi Repopulate: Fungsi ini membantu menyinkronkan kembali select dengan memulihkan opsi yang sebelumnya tersedia, memastikan pengguna memiliki akses ke semua pilihan kecuali yang sudah dipilih di dropdown lainnya.
• Mengkloning Opsi: Mengkloning opsi asli memungkinkan kita untuk mempertahankan referensi semua pilihan yang tersedia, membuatnya lebih mudah untuk mengelola apa yang ditampilkan.

Kesimpulan

Mengelola opsi select yang saling bergantung bisa rumit, terutama ketika berusaha untuk menghindari pemicu event yang tidak diinginkan. Dengan mengikuti pedoman dalam posting ini, Anda dapat menerapkan pengalaman pengguna yang mulus di mana pilihan select secara dinamis menyesuaikan secara real-time tanpa masalah yang terkait dengan pemicu event. Solusi ini tidak hanya melindungi dari perilaku yang tidak terduga tetapi juga menjaga opsi Anda jelas dan pengguna terlibat!

Jika Anda memiliki pertanyaan atau ingin berbagi pengalaman Anda sendiri dengan jQuery dan dropdown dinamis, silakan tinggalkan komentar di bawah!