تعبئة القوائم المنسدلة بناءً على التحديد

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

يتضمن أحد الأساليب لتحقيق هذه الوظيفة استخدام JavaScript لتحديث محتوى القائمة المنسدلة التابعة ديناميكيًا. فيما يلي مثال يوضح كيفية ملء قائمة منسدلة واحدة (B) بناءً على التحديد في أخرى (A):

function configureDropDownLists(ddl1, ddl2) {
  var colours = ['Black', 'White', 'Blue'];
  var shapes = ['Square', 'Circle', 'Triangle'];
  var names = ['John', 'David', 'Sarah'];

  switch (ddl1.value) {
    case 'Colours':
      ddl2.options.length = 0;
      for (i = 0; i تأخذ وظيفة JavaScript هذه معلمتين، ddl1 وddl2، اللذين يمثلان القائمتين المنسدلتين. يقوم أولاً بتهيئة المصفوفات بالخيارات التي سيتم عرضها في كل قائمة منسدلة. 
 
 بعد ذلك، يتم استخدام بيان التبديل للتعامل مع التحديد الذي تم إجراؤه في ddl1. اعتمادًا على قيمة ddl1، فإنه يقوم بمسح الخيارات الموجودة في ddl2 ويملأها بالخيارات المناسبة. يتم استخدام وظيفة createOption لإنشاء وإضافة كل خيار إلى ddl2.
في HTML، يجب تحديد قائمتين منسدلتين:

  
  Colours
  Shapes
  Names



عندما يحدد المستخدم خيارًا في ddl1، يقوم حدث onchange بتشغيل وظيفةconfigureDropDownLists، التي تقوم بتحديث الخيارات في ddl2 وفقًا لذلك. يوفر هذا الأسلوب طريقة مناسبة لملء قائمة منسدلة واحدة بناءً على التحديد في قائمة أخرى، مما يعزز سهولة استخدام النماذج.