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

المشكلة:

أنت تهدف إلى إنشاء ديناميكية نموذج يحتوي على قائمتين منسدلتين (البلد والمدينة) باستخدام JQuery، مما يضمن عرض المدن المقابلة للبلد المحدد فقط في المدينة القائمة المنسدلة.

رمز جافا سكريبت الأصلي:

تواجه وظيفة جافا سكريبت الأصلية، أثناء العمل، مشكلات التوافق في Internet Explorer. يقوم بملء القائمة المنسدلة للمدينة ديناميكيًا استنادًا إلى البلد المحدد، بالاعتماد على مصفوفات مضمنة من خيارات المدينة.

تنفيذ JQuery:

لتعزيز التوافق وتبسيط التنفيذ، JQuery يمكن توظيفها. فيما يلي طريقة فعالة لاستخدام 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)
  });
});

شرح:

نحدد مواقع الكائنات التي تعين البلدان على صفائف المدن المقابلة.
• معالج حدث التغيير بالنسبة إلى القائمة المنسدلة "البلد" تؤدي إلى تشغيل السكان الديناميكيين في القائمة المنسدلة "المدينة".
• يحصل معالج الحدث على البلد المحدد ويسترد مصفوفة المدينة المقابلة من المواقع object.
• تقوم الحلقة بإنشاء عناصر خيارات HTML للمدن وإلحاقها بالقائمة المنسدلة للمدينة باستخدام $locations.html(html).

عرض توضيحي:

يمكنك الرجوع إلى رابط Fiddle المقدم للحصول على عرض توضيحي للعمل.

يعد تطبيق JQuery هذا موجزًا ​​ومتوافقًا مع المتصفحات، ويسهل المجموعة الديناميكية من القائمة المنسدلة المتتالية.