كيفية إنشاء: قوائم منسدلة متسلسلة

إنشاء ثلاثة قوائم منسدلة

إنشاء ثلاثة قوائم منسدلة داخل النموذج HTML

القوائم المنسدلة الثانية والثالثة ستظهر خيارات مختلفة، اعتمادًا على القيمة المختارة في القائمة المنسدلة الأم

الخطوة الأولى - إضافة HTML:

<form name="form1" id="form1" action="/action_page.php">
  المواضيع: <select name="subject" id="subject">
    <option value="" selected="selected">اختر الموضوع</option>
  </select>
  <br><br>
  المواضيع: <select name="topic" id="topic">
    <option value="" selected="selected">يرجى اختيار الموضوع أولاً</option>
  </select>
  <br><br>
  أقسام: <select name="chapter" id="chapter">
    <option value="" selected="selected">يرجى اختيار الموضوع أولاً</option>
  </select>
  <br><br>
  <input type="submit" value="إرسال">
</form>

الخطوة الثانية - إضافة JavaScript:

var subjectObject = {
  "Front-end": {
    "HTML": ["رابط", "صور", "طاولات", "قوائم"],
    "CSS": ["حواف", "الجوانب", "الخلفيات", "التحليل"],
    "JavaScript": ["متغيرات", "المعادلات", "الوظائف", "الشروط"]
  },
  "Back-end": {
    "PHP": ["متغيرات", "الخطوط", "المساحات"],
    "SQL": ["SELECT", "UPDATE", "DELETE"]
  }
}
window.onload = function() {
  var subjectSel = document.getElementById("subject");
  var topicSel = document.getElementById("topic");
  var chapterSel = document.getElementById("chapter");
  for (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x, x);
  }
  subjectSel.onchange = function() {
    // إزالة محتوى قائمة "الفصول" و "المواضيع"
    chapterSel.length = 1;
    topicSel.length = 1;
    // عرض القيمة الصحيحة
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    // إزالة محتوى قائمة "الفصول"
    chapterSel.length = 1;
    // عرض القيمة الصحيحة
    var z = subjectObject[subjectSel.value][this.value];
    for (var i = 0; i < z.length; i++) {
      chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
    }
  }
}

تجربة بنفسك

الصفحات ذات الصلة

دليل:}}قائمة منسدلة CSS

دليل:}}كيفية إنشاء قائمة منسدلة قابلة للإشارة