چگونه ایجاد می‌کنند: لیست‌های فلی پیچیده

یاد بگیرید که چگونه با استفاده از JavaScript لیست‌های فلی پیچیده (کاسکاد) ایجاد کنید.

آپ خود بخوا کریں

سه لیست پایین‌تر ایجاد می‌کنند

سه لیست پایین‌تر در داخل فرم 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="Submit">
</form>

دوماً - اضافه کردن JavaScript:

var subjectObject = {
  "Front-end": {
    "HTML": ["رابط", "تصویر", "جدول", "لیست"],
    "CSS": ["Borders", "Margins", "Backgrounds", "Float"],
    "JavaScript": ["Variables", "Operators", "Functions", "Conditions"]
  },
  "Back-end": {
    "PHP": ["Variables", "Strings", "Arrays"],
    "SQL": ["SELECT", "UPDATE", "DELETE"]
  }
}
window.onload = function() {
  var subjectSel = document.getElementById("subject");
  var topicSel = document.getElementById("topic");
  var chapterSel = document.getElementById("chapter");
  برای (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x, x);
  }
  subjectSel.onchange = function() {
    // “چپتر” اور “موضوع” دراہل منشی کریں
    chapterSel.length = 1;
    topicSel.length = 1;
    // درست مقدار نمائش
    برای (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];
    برای (var i = 0; i < z.length; i++) {
      chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
    }
  }
}

آپ خود بخوا کریں

مرتبطہ صفحات

تدریس:CSS کا ڈاؤن لاس منو

تدریس:کيف کیا کس طرح پر سسٹر کا آئیکن