HTML Seçim Seçeneklerini Değişim Olayını Tetiklemeden jQuery ile Nasıl Yeniden Doldurulur

Bir web uygulamasında birden fazla HTML seçim öğesiyle çalışırken, bir açılır menüdeki bir seçeneğin, başka bir menüdeki kullanılabilir seçenekleri etkilediği bir durumla karşılaşabilirsiniz. Yaygın bir senaryo, bir seçimdeki bir seçeneğin başka bir seçimde seçildiğinde kaybolmasını sağlamaktır. Ancak, bunu yapmak istemeden değişim olaylarını tetikleyebilir ve bu da mantığınızı karmaşıklaştırabilir. Bu yazıda, jQuery kullanarak istenmeyen değişim olaylarını tetiklemeksizin seçim seçeneklerini dinamik olarak yeniden doldurmayı ele alacağız.

Problem

İki açılır menünün (seçim öğeleri) karşılıklı olarak bağımlı olduğunu hayal edin. Bir açılır menüde bir seçeneği seçtiğinizde bu seçeneğin ikinci açılır menüden kaldırılmasını istiyorsunuz, böylece kullanıcıların her iki menüden aynı seçeneği seçmesi mümkün olmasın. Ancak, jQuery’nin varsayılan davranışı ile bir seçimdeki seçenekleri değiştirmek, o seçimin değişim olayını da tetikler ve bu da uygulamanızda beklenmedik davranışlara yol açabilir.

Örnek Senaryo

Açılır menüleri göstermek için basit bir HTML yapısı:

<select id="one">
  <option value="1">bir</option>
  <option value="2">iki</option>
  <option value="3">üç</option>
</select>
<select id="two">
  <option value="1">bir</option>
  <option value="2">iki</option>
  <option value="3">üç</option>
</select>

Birinci açılır menüden (“bir”) seçtiğinizde, amaç “bir” seçeneğini ikinci açılır menüden ("#two") kaldırmaktır. Daha sonra “iki” seçeneğini “#two"dan seçtiğinizde, aynı davranışın ters yönde gerçekleşmesi gerekir.

Çözüm

Seçim seçeneklerini yeniden doldururken değişim olaylarının tetiklenmesini önlemek için iki aşamalı bir yaklaşım kullanmanız gerekecek: olay işleyicilerini geçici olarak ayırmak ve değişim olayının işlenip işlenmeyeceğini belirlemek için bir bayrak kullanmak.

Adım 1: JavaScript Mantığını Değiştirin

jQuery fonksiyonlarınızı şu şekilde ayarlayın:

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

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

    var isChanging = false; // Değişim olaylarını tetiklemeyi önlemek için bayrak

    $one.change(function () {
        if (isChanging) return; // Zaten değişiyorsa görmezden gel
        
        isChanging = true; // Seçenekleri değiştirmeden önce bayrağı ayarla
        var selectedValue = $("option:selected", this).val();
        $two.find("option[value='" + selectedValue + "']").remove();
        repopulateOptions($two, selectOptions[1]); // Seçenekleri geri yükle
        isChanging = false; // Bayrağı sıfırla
    });
    
    $two.change(function () {
        if (isChanging) return; // Zaten değişiyorsa görmezden gel
        
        isChanging = true; // Seçenekleri değiştirmeden önce bayrağı ayarla
        var selectedValue = $("option:selected", this).val();
        $one.find("option[value='" + selectedValue + "']").remove();
        repopulateOptions($one, selectOptions[0]); // Seçenekleri geri yükle
        isChanging = false; // Bayrağı sıfırla
    });

    function repopulateOptions($select, options) {
        options.each(function() {
            if (!$select.find("option[value='" + this.value + "']").length) {
                $select.append(this); // Zaten mevcut değilse ekle
            }
        });
    }
});

Adım 2: Ana Bileşenlerin Açıklaması

• isChanging Bayrağı: Bu boolean bayrağı, olay işleyicilerinin çalıştırılıp çalıştırılmayacağını takip eder, seçeneklerle oynama sırasında istemeden olay tetiklenmesini önler.
• Yeniden Doldurma Fonksiyonu: Bu fonksiyon, daha önce mevcut seçenekleri geri getirerek seçimlerin senkronizasyonunu sağlar ve kullanıcının, diğer açılır menüde seçilmemiş tüm seçeneklere erişimini garanti eder.
• Seçenekleri Klonlama: Orijinal seçenekleri klonlamak, kullanılabilir tüm seçimleri referans alarak yönetimi kolaylaştırır.

Sonuç

Karşılıklı bağımlı seçim seçeneklerini yönetmek, istenmeyen olay tetiklerini önlemeye çalışırken zor olabilir. Bu yazıda yukarıdaki kılavuzları izleyerek, kullanıcı seçimlerinin dinamik olarak gerçek zamanlı olarak ayarlandığı sorunsuz bir kullanıcı deneyimi uygulayabilirsiniz. Bu çözüm, beklenmeyen davranışlara karşı koruma sağlamanın yanı sıra, seçeneklerinizi net ve kullanıcıların etkileşimde kalmasını da sağlar!

jQuery ve dinamik açılır menüler konusundaki sorularınızı sormak veya deneyimlerinizi paylaşmak için aşağıda bir yorum bırakmaktan çekinmeyin!