Hallo zusammen
,
bis hierhin habe ich mit javascript eine 3-fache abhängige Kategorisierung erstellt. Dazu einmal hier der Code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="row m-3">
<select class="custom-select form-control col-sm" id="rootcategory" name="rootcategory" onchange="change1Category('rootcategory', 'category', 'subcategory')">
<option value="keine">Oberkategorie auswählen</option>
<option value="Kontinente">Kontinente</option>
<option value="Menschen">Menschen</option>
<option value="Tiere">Tiere</option>
</select>
<select class="custom-select form-control col-sm" id="category" name="category" onchange="change2Category('category', 'subcategory')"></select>
<select class="custom-select form-control col-sm" id="subcategory" name="subcategory"></select>
</div>
</body>
<script>
function change2Category(a2,a3) {
var a2 = document.getElementById(a2);
var a3 = document.getElementById(a3);
a3.innerHTML = "";
if (a2.value == "Afrika") {
var optionArray2 = ["keine|Unterkategorie auswählen", "Elfenbeinküste|Elfenbeinküste", "Nigeria|Nigeria", "Südafrika|Südafrika"]
} else if (a2.value == "Amerika") {
var optionArray2 = ["keine|Unterkategorie auswählen", "Argentinien|Argentinien", "Brasilien|Brasilien", "Chile|Chile", "USA|USA"]
} else if (a2.value == "Europa") {
var optionArray2 = ["keine|Unterkategorie auswählen", "Deutschland|Deutschland", "Österreich|Österreich", "Schweiz|Schweiz"]
} else if (a2.value == "Babies") {
var optionArray2 = ["keine|Unterkategorie auswählen", "Neugeborene|Neugeborene", "2 bis 6 Monate|2 bis 6 Monate", "7 - 12 Monate|7 - 12 Monate", "1 bis 2 Jahre|1 bis 2 Jahre"]
} else if (a2.value == "Erwachsene") {
var optionArray2 = ["keine|Unterkategorie auswählen", "Junge Erwachsene|Junge Erwachsene", "Best Ager|Best Ager", "Senioren|Senioren"]
} else if (a2.value == "Jugendliche") {
var optionArray2 = ["keine|Unterkategorie auswählen", "12 bis 15 Jahre|12 bis 15 Jahre", "16 bis 18 Jahre|16 bis 18 Jahre"]
} else if (a2.value == "Kinder") {
var optionArray2 = ["keine|Unterkategorie auswählen", "Kleinkinder|Kleinkinder", "Grundschüler|Grundschüler"]
} else if (a2.value == "Fische") {
var optionArray2 = ["keine|Unterkategorie auswählen", "Delphine|Delphine", "Haie|Haie", "Lachs|Lachs", "Wels|Wels"]
} else if (a2.value == "Haustiere") {
var optionArray2 = ["keine|Unterkategorie auswählen", "Hunde|Hunde", "Katzen|Katzen", "Meerschweinchen|Meerschweinchen"]
} else if (a2.value == "Reptilien") {
var optionArray2 = ["keine|Unterkategorie auswählen", "Aligatoren|Aligatoren", "Krokodile|Krokodile", "Salamander|Salamander", "Schlangen|Schlangen"]
} else if (a2.value == "Vögel") {
var optionArray2 = ["keine|Unterkategorie auswählen", "Adler|Adler ", "Bussarde|Bussarde", "Eulen|Eulen", "Singvögel|Singvögel"]
}
for (var option2 in optionArray2) {
var pair2 = optionArray2[option2].split("|");
var newOption2 = document.createElement("option");
newOption2.value = pair2[0];
newOption2.innerHTML = pair2[1];
a3.options.add(newOption2);
}
}
function change1Category(a1,a2) {
var a1 = document.getElementById(a1);
var a2 = document.getElementById(a2);
a2.innerHTML = "";
if (a1.value == "Kontinente") {
var optionArray1 = ["keine|Kategorie auswählen", "Afrika|Afrika", "Amerika|Amerika", "Europa|Europa"]
} else if (a1.value == "Menschen") {
var optionArray1 = ["keine|Kategorie auswählen", "Babies|Babies", "Erwachsene|Erwachsene", "Jugendliche|Jugendliche", "Kinder|Kinder"]
} else if (a1.value == "Tiere") {
var optionArray1 = ["keine|Kategorie auswählen", "Fische|Fische", "Haustiere|Haustiere", "Reptilien|Reptilien", "Vögel|Vögel"]
}
for (var option1 in optionArray1) {
var pair1 = optionArray1[option1].split("|");
var newOption1 = document.createElement("option");
newOption1.value = pair1[0];
newOption1.innerHTML = pair1[1];
a2.options.add(newOption1);
}
}
</script>
</html>Dazu gibt es eine Datenbanktabelle, welche Einträge mit den aufgelisteten Kategorien beinhaltet.
Beispiel:
1. Eintrag: Titel: Steinadler in den Alpen; Bild: Steinadler.png; Oberkategorie: Tiere; Kategorie: Vögel; Unterkategorie: Adler;
2. Eintrag: Titel: Grand Canyon Nationalpark; Bild: Canyon.png; Oberkategorie: Kontinente; Kategorie: Amerika; Unterkategorie: USA;
Nun möchte ich zunächst alle Einträge anzeigen lassen. Dies habe ich mit einer foreach-Schleife getan.
Der Punkt an dem ich nicht mehr weiterkomme ist Folgender
:
Ich möchte in diesem Beispiel bei der Auswahl der "Oberkategorie: Kontinente" nur noch den 2. Eintrag angezeigt bekommen. Bei der weiteren Auswahl der "Kategorie: Amerika" weiterhin diesen Eintrag. Und bei Auswahl der "Unterkategorie: Chile" keinen Eintrag mehr.
Allgemein gesprochen möchte ich dynamisch immer die Einträge der untersten gefilterten Ebene anzeigen lassen.
Im Idealfall sollte die Kategorisierung auch nach einer Pagination beibehalten werden. Sprich nach dem Wechsel von Seite 1 auf Seite 2 sollte z. B. die Auswahl "Oberkategorie: Kontinente + Kategorie: Amerika" weiterhin Bestand haben.
Ist so etwas grundsätzlich mit javascript machbar?
