قم بملء قائمة منسدلة واحدة بناءً على التحديد في أخرى باستخدام JavaScript

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

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

نموذج التعليمات البرمجية

توضح وظيفة JavaScript التالية كيفية تحقيق هذه الوظيفة:

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 
علامات HTML
يتضمن ترميز HTML التالي قائمتين منسدلتين:
ColoursShapesNames
الاستخدام
لاستخدام هذه الوظيفة، ما عليك سوى استدعاء وظيفةconfigDropDownLists، وتمرير القائمة المنسدلة الأولى (ddl1) والقائمة المنسدلة الثانية (ddl2) كحجج. ستتعامل الوظيفة مع المجموعة الديناميكية للقائمة المنسدلة B بناءً على التحديد الذي تم إجراؤه في القائمة المنسدلة A. 
 
 يوضح مقتطف التعليمات البرمجية هذا حلاً عمليًا كاملاً، مما يسمح لك بملء قائمة منسدلة ديناميكيًا بناءً على التحديد الذي تم إجراؤه في أخرى باستخدام JavaScript ، دون الحاجة إلى استدعاء قاعدة البيانات أو طلبات AJAX.