Узнать, как создать каскадный каскадный выпадающий список используя HTML, CSS и JavaScript.
Каскадные выпадающие списки
Попробуйте сами »Создать три каскадных выпадающих списка
Создайте три каскадных выпадающих списка внутри HTML-формы.
Второй и третий каскадные выпадающие списки будут отображать разные параметры в зависимости от значения, выбранного в родительском раскрывающемся списке.
Шаг 1) Добавьте 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>
Шаг 2) Добавьте 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, чтобы узнать больше о выпадающих списках.
Совет: перейдите к нашему Выпадающим спискам при наведении, чтобы узнать больше о выпадающих списках при наведении.