✔ Select Inhalt und Sichtbarkeit abhängig von vorhergehendem Select

[LongDonJohn]

Hallo zusammen,

ich beiße mir nun schon seit Tagen die Zähne an einem Problem aus, zu dem ich keine funktionierende Lösung finde.

Ich fange einfach mal vorne an, in der Hoffnung, ihr könnt mein Problem nachvollziehen:

Ich habe ein Menü, das eine Menütiefe von maximal 3 Stufen hat. Die Menüpunkte stehen in einem Mehrdimensionalen Array und werden daraus aufgebaut:

$mainkat=array(); 

$mainkat[1]="Transportfahrzeuge";
$mainkat[2]="Tiere";
$mainkat[3]="Jahreszeit";

$subkat=array();

	$subkat[1][1]="PKW";
	$subkat[1][2]="LKW";
	$subkat[1][3]="Flugzeug";
	
	$subkat[2][1]="Säugetiere";
	$subkat[2][2]="Insekten";
	$subkat[2][3]="Amphibien";
	
	$subkat[3][1]="Sommer";
	$subkat[3][2]="Herbst";

	
	$untersubkat=array();
		
		$untersubkat[1][1][1]="BMW";
		$untersubkat[1][1][2]="VW";
		$untersubkat[1][1][3]="Audi";

		$untersubkat[1][2][1]="bis 7,5t";
		$untersubkat[1][2][2]="über 7,5t";

Aus diesen Menüpunkten baut sich das Menü auf.

Jetzt möchte ich drei Selectfelder haben. Zunächst ist nur das erste sichtbar und zeigt nur den Inhalt aus dem Array $mainkat.

Wenn man hier einen Punkt auswählt soll ein zweites Selectfeld eingeblendet werden, dass nur die passenden Einträge zu der gewählten Kategorie anzeigt.

Und auch hier soll nach auswählen eines Punktes ein drittes Selectfeld erscheinen (wenn unter dem Punkt noch ein Menüpunkt in der dritten Ebene ist) und die passenden Einträge anzeigen.

Ich habe es mir verschiedenen Lösungen hier aus dem Forum versucht, aber die sind alle auf zwei Selectfelder beschränkt und funktionieren auch nicht immer...

Daher macht der Quelltext wohl nicht wirklich Sinn, aber ich poste ihn mal:

functions.js

subkat = new Array();
subkat[1]=new Array("PKW", "LKW", "Flugzeug" );
subkat[2]=new Array("Säugetiere", "Insekten", "Amphibien");
subkat[3]=new Array("Sommer", "Herbst");


 
function change() {
 // vorhandene options aus Select-Field löschen
 var anzChilds = document.getElementById("kat_1_2").childNodes.length;
 
 for(var i=0; i<anzChilds; i++) {
     document.getElementById("kat_1_2").removeChild(document.getElementById("kat_1_2").childNodes[i]);
 }

 var chooserValue = document.getElementById("chooser").value;
 
 for(i=0; i<subkat[chooserValue].length; i++) {
     var newOption = document.createElement("option");
    
    // value-Attribut des OPTION-Tags erzeugen
    var optionValue = document.createAttribute("value");
    optionValue.nodeValue = subkat[chooserValue][i];
    newOption.setAttributeNode(optionValue);
    
    // Daten zwischen <option></option> setzen
    var optionText = document.createTextNode(subkat[chooserValue][i]);
    newOption.appendChild(optionText);
    
    document.getElementById("kat_1_2").appendChild(newOption);
 }
 
}

Das funktioniert nur bei jedem dritten mal richtig - die restlichen male befinden sich falsche Einträge im zweiten Selectfeld.

Hier der Teil aus der Html Datei:

<select size="1" class="res_select" size="1" name="chooser" id="chooser" onchange="change()">
	<option selected="selected" value="nix">Bitte auswählen</option>
	<option value="1">Transportfahrzeuge</option>
	<option value="2">Tiere</option>
	<option value="3">Jahreszeit</option>
</select>	

<select size="1" class="res_select" name="kat_1_2" id="kat_1_2">
	<option selected="selected">Bitte auswählen</option>
</select>

Wie man sieht bin ich noch nicht mal bis zum dritten Feld gekommen, da das schon nicht richtig läuft...

Die Sache mit dem sichtbar werden ist lediglich "Nice-to-have" und nicht zwingend notwendig, aber für den Rest wäre es nett, wenn jemand da nen Vorschlag hätte, wie ich das angehen kann...

Danke im Voraus!
John

 

[Sven Mintel]

Schau mal hier herein..ich glaub, das ist soetwas, was du meinst: http://www.tutorials.de/forum/javascript/240568-dropdown-feld-aus-datenbank-fuellen.html

 

[LongDonJohn]

Super! Das war sogar ganz genau das, was ich gesucht habe! Danke dir!

Ein letztes noch: Wenn alles ausgewählt ist, wird durch das Formular die ausgewählte Kategorie weitergegeben. Wie aber muss ich den Array (name="box['.$db[$parent][0].']" - so baut sich ja der Name des Select-Feldes auf) aufrufen, um an seinen Wert zu kommen?

 

[Sven Mintel]

Du positionierst den Zeiger per end() auf das Ende von $_POST['box'] und greifst dann auf dies Element zu:

<?php 
  @end($_POST['box']);
  @print($db[$_POST['box'][key($_POST['box'])]][0]);
?>

...hab das mal noch mit eingebaut, da erscheint jetzt auch ein Submit-Button, wenn fertiggewählt wurde

 

[LongDonJohn]

Habe das ein bischen anders gelöst:

Jedes Selectfeld heißt jetzt box ohne die Variablen dahinter. Dadurch erhalte ich lediglich den Wert des letzten Feldes, durch den ich aber auf die Werte der anderen Felder schließen kann.

Nochmals tausend Dank! Schönes Wochenende!

Gruß
John