Nasıl Yapılır - Basamaklı Açılır Liste
JavaScript ile basamaklı açılır liste oluşturmayı öğrenin.
Üç Açılır Liste Oluşturun
Bir HTML formunun içinde üç açılır liste oluşturun.
İkinci ve üçüncü açılır liste, ana açılır listede seçilen değere bağlı olarak farklı seçenekler gösterecektir.
Adım 1) HTML'yi ekleyin:
Örnek
<form name="form1" id="form1" action="/action_page.php">
Subjects:
<select name="subject" id="subject">
<option value=""
selected="selected">Select subject</option>
</select>
<br><br>
Topics: <select name="topic" id="topic">
<option
value="" selected="selected">Please select subject first</option>
</select>
<br><br>
Chapters: <select name="chapter" id="chapter">
<option value="" selected="selected">Please select topic first</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
Adım 2) JavaScript'i ekleyin:
Örnek
var subjectObject = {
"Front-end": {
"HTML": ["Links", "Images", "Tables", "Lists"],
"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");
for (var x in subjectObject)
{
subjectSel.options[subjectSel.options.length] = new
Option(x, x);
}
subjectSel.onchange = function() {
//empty Chapters- and Topics- dropdowns
chapterSel.length =
1;
topicSel.length = 1;
//display correct values
for (var y in subjectObject[this.value])
{
topicSel.options[topicSel.options.length]
= new Option(y, y);
}
}
topicSel.onchange = function() {
//empty Chapters
dropdown
chapterSel.length = 1;
//display correct values
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]);
}
}
}
İpucu: Açılır listeler hakkında daha fazla bilgi edinmek için CSS Açılanlar Eğitimimize gidin .
İpucu: Üzerine gelinebilir açılır listeler hakkında daha fazla bilgi edinmek için Gezinebilir Açılır Listelerimize gidin.