كيف إعادة تعبئة خيارات HTML Select دون إثارة حدث التغيير باستخدام jQuery

عند العمل مع عدة عناصر HTML من نوع select في تطبيق ويب، قد تجد نفسك في حالة يكون فيها اختيار خيار من قائمة منسدلة يؤثر على الخيارات المتاحة في قائمة أخرى. سيناريو شائع هو جعل خيار متاح في قائمة select واحدة يختفي عندما يتم اختياره في قائمة أخرى. ومع ذلك، فإن القيام بذلك يمكن أن يؤدي عن غير قصد إلى إثارة أحداث التغيير التي قد تعقد منطقك. في هذه المشاركة، سنتناول كيفية إعادة تعبئة خيارات select ديناميكيًا دون إثارة أحداث التغيير غير المرغوب فيها باستخدام jQuery.

المشكلة

تخيل أن لديك قائمتين منسدلتين (عناصر select) تتبعان بعضها البعض. تريد تنفيذ نظام حيث يؤدي اختيار خيار في قائمة منسدلة إلى حذف ذلك الخيار من القائمة الثانية، لضمان عدم قدرة المستخدمين على اختيار نفس الخيار من كلا القائمتين. ومع ذلك، مع سلوك jQuery الافتراضي، فإن تغيير الخيارات في واحدة من select يؤدي أيضاً إلى استدعاء حدث التغيير لتلك select، مما قد يؤدي إلى سلوك غير متوقع في تطبيقك.

سيناريو المثال

إليك هيكل HTML بسيط لتوضيح القوائم المنسدلة:

<select id="one">
  <option value="1">واحد</option>
  <option value="2">اثنان</option>
  <option value="3">ثلاثة</option>
</select>
<select id="two">
  <option value="1">واحد</option>
  <option value="2">اثنان</option>
  <option value="3">ثلاثة</option>
</select>

عند اختيار “واحد” من القائمة المنسدلة الأولى (#one)، الهدف هو إزالة “واحد” من القائمة المنسدلة الثانية (#two). إذا كنت بعد ذلك تختار “اثنان” من #two، يجب أن يحدث نفس السلوك بالعكس.

الحل

لتجنب إثارة أحداث التغيير أثناء إعادة تعبئة الخيارات في القوائم المنسدلة، ستحتاج إلى اتباع نهج من خطوتين: فصل معالجات الأحداث مؤقتًا واستخدام علامة لتحديد ما إذا كان يجب معالجة حدث التغيير.

الخطوة 1: تعديل منطق JavaScript

ابدأ بتهيئة وظائف jQuery الخاصة بك كما يلي:

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

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

    var isChanging = false; // علامة لمنع إثارة أحداث التغيير

    $one.change(function () {
        if (isChanging) return; // تجاهل إذا كان يتم التغيير بالفعل
        
        isChanging = true; // تعيين العلم قبل تغيير الخيارات
        var selectedValue = $("option:selected", this).val();
        $two.find("option[value='" + selectedValue + "']").remove();
        repopulateOptions($two, selectOptions[1]); // استعادة الخيارات
        isChanging = false; // إعادة تعيين العلم
    });
    
    $two.change(function () {
        if (isChanging) return; // تجاهل إذا كان يتم التغيير بالفعل
        
        isChanging = true; // تعيين العلم قبل تغيير الخيارات
        var selectedValue = $("option:selected", this).val();
        $one.find("option[value='" + selectedValue + "']").remove();
        repopulateOptions($one, selectOptions[0]); // استعادة الخيارات
        isChanging = false; // إعادة تعيين العلم
    });

    function repopulateOptions($select, options) {
        options.each(function() {
            if (!$select.find("option[value='" + this.value + "']").length) {
                $select.append(this); // إضافة فقط إذا لم يكن موجوداً بالفعل
            }
        });
    }
});

الخطوة 2: شرح المكونات الرئيسية

• علم isChanging: هذا العلم البولياني يحتفظ بتتبع ما إذا كانت معالجات الأحداث يجب تنفيذها أو تجاهلها، مما يمنع أي تفعيل غير مقصود أثناء التلاعب بالخيارات.
• دالة إعادة التعبئة: هذه الدالة تساعد على إعادة مزامنة القوائم المنسدلة من خلال استعادة الخيارات المتاحة سابقًا، مما يضمن أن لدى المستخدم إمكانية الوصول إلى جميع الخيارات ما لم يتم اختيارها بالفعل في القائمة المنسدلة الأخرى.
• استنساخ الخيارات: يسمح استنساخ الخيارات الأصلية لنا بالاحتفاظ بمرجع لجميع الخيارات المتاحة، مما يجعل من السهل إدارة ما يتم عرضه.

الخاتمة

إدارة خيارات select التابعة يمكن أن تكون صعبة، وخاصة عند السعي لتجنب إثارة الأحداث غير المرغوبة. من خلال اتباع الإرشادات في هذه المشاركة، يمكنك تنفيذ تجربة مستخدم سلسة حيث تتكيف اختيارات select ديناميكيًا في الوقت الفعلي دون أي مشاكل مرتبطة بإثارة الأحداث. هذه الحلول لا تحمي من السلوكيات غير المتوقعة فحسب، بل تبقي خياراتك واضحة وتجذب المستخدمين!

إذا كان لديك أي أسئلة أو ترغب في مشاركة تجاربك الخاصة مع jQuery والقوائم المنسدلة الديناميكية، فلا تتردد في ترك تعليق أدناه!