Nasıl oluşturulur: Düzeyli açılır liste

Üç adet açılır liste oluşturun

HTML formu içinde üç adet açılır liste oluşturun.

İkinci ve üçüncü açılır listeler, ana açılır listede seçilen değile bağlı olarak farklı seçenekler gösterecektir.

İlk adım - HTML eklemek:

<form name="form1" id="form1" action="/action_page.php">
  Konular: <select name="subject" id="subject">
    <option value="" selected="selected">Konuyu seçin</option>
  </select>
  <br><br>
  Konular: <select name="topic" id="topic">
    <option value="" selected="selected">Öncelikle konuyu seçin</option>
  </select>
  <br><br>
  Bölümler: <select name="chapter" id="chapter">
    <option value="" selected="selected">Öncelikle konuyu seçin</option>
  </select>
  <br><br>
  <input type="submit" value="Gönder">
</form>

İkinci adım - JavaScript eklemek:

var subjectObject = {
  "Front-end": {
    "HTML": ["Bağlantılar", "Görseller", "Tablolar", "Listeler"],
    "CSS": ["Kenarlar", "Marjlar", "Arka plan", "Yüzeysel"],
    "JavaScript": ["Değişkenler", "Operatörler", "Fonksiyonlar", "Koşullar"]
  }
  "Arka uç": {
    "PHP": ["Değişkenler", "Dizgiler", "Diziler"],
    "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() {
    // 'Bölüm' ve 'Konu' açılır menülerini temizle
    chapterSel.length = 1;
    topicSel.length = 1;
    // Doğru değeri göster
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    // 'Bölüm' açılır menüsünü temizle
    chapterSel.length = 1;
    // Doğru değeri göster
    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]);
    }
  }
}

Kişisel olarak deneyin

İlgili sayfa

Rehber:CSS Açılır Menü

Rehber:İçine oturulan açılır menü nasıl yapılır