Chain Dropdown Menu в Magento не работает
Я ищу около 3 дней для решения, но я не могу получить окончательную часть, чтобы сделать это возможным.
Моя проблема в том, что я не могу установить зависимость между моими 3 меню.
Это означает, что параметры C должны зависеть от значения, выбранного в B, а параметры B должны зависеть от значения, выбранного в A. т.е. a->b->c
Я получаю только Меню a -> b, но не b -> c.
Если кто-то может дать мне новый код для работы, где мне нужно только указать опции.
Это мой код:
<html>
<head>
<style type="text/css">
</style>
<script language="Javascript">
<!-- Start
function update_auswahl1() {
var speicher;
var auswahl1 = document.forms.verzeichnis.auswahl1;
var auswahl2 = document.forms.verzeichnis.auswahl2;
var auswahl3 = document.forms.verzeichnis.auswahl3;
auswahl2.options.length = 0; // DropDown Menü entleeren
auswahl3.options.length = 0; // DropDown Menü entleeren
//********************** AUSWAHL 1 ****************************************************************
if (auswahl1.options[auswahl1.selectedIndex].value == "a") {
auswahl2.options[0] = new Option("d");
auswahl2.options[1] = new Option("e");
} else if (auswahl1.options[auswahl1.selectedIndex].value == "b") {
auswahl2.options[0] = new Option("e");
auswahl2.options[1] = new Option("f");
} else if (auswahl1.options[auswahl1.selectedIndex].value == "c") {
auswahl2.options[0] = new Option("f");
auswahl2.options[1] = new Option("g");
} else if (auswahl1.options[auswahl1.selectedIndex].value == "") {
auswahl2.options[0] = new Option("---- Bitte waehlen ----");
}
//*************************************************************************************************
//********************* AUSWAHL 2 *****************************************************************
if (auswahl2.options[auswahl2.selectedIndex].values == "d") {
auswahl3.options[0] = new Option("h");
auswahl3.options[1] = new Option("i");
auswahl3.options[2] = new Option("j");
} else if (auswahl2.options[auswahl2.selectedIndex].values == "e") {
auswahl3.options[0] = new Option("i");
auswahl3.options[1] = new Option("j");
auswahl3.options[2] = new Option("k");
} else if (auswahl2.options[auswahl2.selectedIndex].values == "f") {
auswahl3.options[0] = new Option("k");
auswahl3.options[1] = new Option("l");
auswahl3.options[2] = new Option("m");
}
}
//*************************************************************************************************
// Ende -->
</script>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form name="verzeichnis">
<select size="1" name="auswahl1" onChange="update_auswahl1()">
<option value="" selected>---- Bitte wählen ----</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<br>
<br>
<select size="1" name="auswahl2">
<option selected>---- Bitte wählen ----</option>
</select>
<br>
<br>
<select name="auswahl3" size="1">
<option selected>---- Bitte wählen ----</option>
</select>
</form>
</body>
</html>
Я благодарен за каждую помощь
1 ответ
Решение
Вы сделали 3 ошибки:
- В блоке if-else "AUSWAHL 2" вы вводите ".values" вместо ".value"
(auswahl2.options [auswahl2.selectedIndex].values == "d")
- Вы не добавили обработчик на select auswahl2.
- Нужно написать 2 функции вместо 1, иначе при изменении auswahl2 он будет перезаписан без сохранения выбранного значения.
<html>
<head>
<style type="text/css">
</style>
<script language="Javascript">
<!-- Start
function update_auswahl1() {
var speicher;
var auswahl1 = document.forms.verzeichnis.auswahl1;
var auswahl2 = document.forms.verzeichnis.auswahl2;
var auswahl3 = document.forms.verzeichnis.auswahl3;
auswahl2.options.length = 0; // DropDown Menü entleeren
auswahl3.options.length = 0; // DropDown Menü entleeren
//********************** AUSWAHL 1 ****************************************************************
if (auswahl1.options[auswahl1.selectedIndex].value == "a") {
auswahl2.options[0] = new Option("d");
auswahl2.options[1] = new Option("e");
} else if (auswahl1.options[auswahl1.selectedIndex].value == "b") {
auswahl2.options[0] = new Option("e");
auswahl2.options[1] = new Option("f");
} else if (auswahl1.options[auswahl1.selectedIndex].value == "c") {
auswahl2.options[0] = new Option("f");
auswahl2.options[1] = new Option("g");
} else if (auswahl1.options[auswahl1.selectedIndex].value == "") {
auswahl2.options[0] = new Option("---- Bitte waehlen ----");
}
update_auswahl2();
//*************************************************************************************************
}
function update_auswahl2() {
var speicher;
var auswahl2 = document.forms.verzeichnis.auswahl2;
var auswahl3 = document.forms.verzeichnis.auswahl3;
auswahl3.options.length = 0; // DropDown Menü entleeren
//********************* AUSWAHL 2 *****************************************************************
if (auswahl2.options[auswahl2.selectedIndex].value == "d") {
auswahl3.options[0] = new Option("h");
auswahl3.options[1] = new Option("i");
auswahl3.options[2] = new Option("j");
} else if (auswahl2.options[auswahl2.selectedIndex].value == "e") {
auswahl3.options[0] = new Option("i");
auswahl3.options[1] = new Option("j");
auswahl3.options[2] = new Option("k");
} else if (auswahl2.options[auswahl2.selectedIndex].value == "f") {
auswahl3.options[0] = new Option("k");
auswahl3.options[1] = new Option("l");
auswahl3.options[2] = new Option("m");
}
}
//*************************************************************************************************
// Ende -->
</script>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form name="verzeichnis">
<select size="1" name="auswahl1" onChange="update_auswahl1()">
<option value="" selected>---- Bitte wählen ----</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<br>
<br>
<select size="1" name="auswahl2" onChange="update_auswahl2()">
<option selected>---- Bitte wählen ----</option>
</select>
<br>
<br>
<select name="auswahl3" size="1">
<option selected>---- Bitte wählen ----</option>
</select>
</form>
</body>
</html>