نشر قائمة منسدلة متتالية باستخدام jQuery

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

وظيفة JavaScript الأصلية لإنشاء قوائم منسدلة متتالية، كما هو موضح في المشكلة، تفتقر إلى التوافق مع IE. لحل هذه المشكلة، يمكننا تسخير قوة jQuery وتبسيط العملية.

jQuery Solution:

حل jQuery موجز وأنيق:

jQuery(function($) {
    var locations = {
        'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
        'Spain': ['Barcelona'],
        'Hungary': ['Pecs'],
        'USA': ['Downers Grove'],
        'Mexico': ['Puebla'],
        'South Africa': ['Midrand'],
        'China': ['Beijing'],
        'Russia': ['St. Petersburg'],
    }

    var $locations = $('#location');
    $('#country').change(function () {
        var country = $(this).val(), lcns = locations[country] || [];

        var html = $.map(lcns, function(lcn){
            return ''   lcn   ''
        }).join('');
        $locations.html(html)
    });
});

كيف يعمل:

1. نحدد كائن المواقع الذي يعين البلدان للمدن المرتبطة بها.
2. نحدد القائمة المنسدلة للبلد (#country) والقائمة المنسدلة للموقع (#location).
3. عند تحديد بلد في القائمة المنسدلة للبلد، يقوم معالج الحدث باسترداد المدن المقابلة من كائن المواقع.
4. ال يتم تحويل المدن إلى خيارات HTML واستخدامها لملء القائمة المنسدلة للموقع.

يقوم حل jQuery هذا بملء القائمة المنسدلة للموقع بالمدن المناسبة بسلاسة بناءً على البلد المحدد. إن بساطته وتوافقه مع المتصفحات المختلفة يجعله خيارًا مثاليًا لتعزيز تجربة المستخدم في تطبيقات النماذج.